Getting Data from Selected Radio Buttons in AngularJS Using ng-repeat

Question

Getting Data from Selected Radio Buttons in AngularJS Using ng-repeat

I am looking to retrieve the data (id, name) of a selected row using a radio button. Here is what I have so far:

<tr ng-repeat="list in listTypes">
    <td>{{list.TaskId}}</td>
    <td>{{list.Comments}}</td>
    <td>{{list.RecordDate}}</td>
    <td>{{list.StartDate}}</td>
    <td>{{list.DueDate}}</td>
    <td>{{list.AssignTo}}</td>
    <td>{{list.AssignBy}}</td>
    <td><label class="switch">
        <input type="radio" name="switch-radio1" checked="" value="0" ng-value="true" >
        <span></span>
    </label></td>
</tr>

I need to extract the data taskId and comments from the selected row when the radio button is selected. What JavaScript function should I use for this? Thank you for any assistance.

javascript angularjs

Answer 1

Answer №1

If you want to utilize ng-model with your checkbox, you can do so by implementing the following:

<tr data-ng-repeat=" item in itemList">
    <td>{{item.ID}}</td>
    <td>{{item.Description}}</td>
    <td>{{item.DateCreated}}</td>
    <td>{{item.StartDate}}</td>
    <td>{{item.EndDate}}</td>
    <td>{{item.AssignTo}}</td>
    <td>{{item.AssignBy}}</td>
    <td>
         <label class="switch">
             <input type="checkbox" name="item-checkbox" ng-model="item.selected" ng-change="onItemCheck(item)">
         </label>
    </td>
</tr>

Your controller function will then handle the selected items as shown below:

$scope.onItemCheck = function(selectedItem) {
    // Access the selected item here
    console.log(selectedItem.selected);    // Will be true if selected, false otherwise
};

Answer 2

If you want to utilize ng-model with your checkbox, you can do so by implementing the following:

<tr data-ng-repeat=" item in itemList">
    <td>{{item.ID}}</td>
    <td>{{item.Description}}</td>
    <td>{{item.DateCreated}}</td>
    <td>{{item.StartDate}}</td>
    <td>{{item.EndDate}}</td>
    <td>{{item.AssignTo}}</td>
    <td>{{item.AssignBy}}</td>
    <td>
         <label class="switch">
             <input type="checkbox" name="item-checkbox" ng-model="item.selected" ng-change="onItemCheck(item)">
         </label>
    </td>
</tr>

Your controller function will then handle the selected items as shown below:

$scope.onItemCheck = function(selectedItem) {
    // Access the selected item here
    console.log(selectedItem.selected);    // Will be true if selected, false otherwise
};

Answer 3

Answer №2

To begin, make sure to assign an ng-model to your radio button and update the ng-value attribute to reference the list's TaskId.

<input type="radio" name="switch-radio1" ng-model="selectedItem" checked="" value="0" ng-value="list.TaskId" >

Once you have access to the list's TaskId, utilize Array.prototype.filter to search for the corresponding data within listTypes.

Answer 4

To begin, make sure to assign an ng-model to your radio button and update the ng-value attribute to reference the list's TaskId.

<input type="radio" name="switch-radio1" ng-model="selectedItem" checked="" value="0" ng-value="list.TaskId" >

Once you have access to the list's TaskId, utilize Array.prototype.filter to search for the corresponding data within listTypes.

Answer 5

Answer №3

I have discovered a more efficient method than others. When utilizing "ng-model," there is no need for the name attribute, and by using "$parent," I believe we can access a single model to fulfill the role of the name attribute as well as bind data. This is due to the fact that each item has its own scope within ngRepeat, requiring a higher level approach to reach the defined single model.

The ngRepeat directive creates a template for each item in a collection. Each template instance has its own scope, where the loop variable represents the current collection item, and $index refers to the item's index or key. https://code.angularjs.org/1.7.5/docs/api/ng/directive/ngRepeat

$scope Properties : $parent indicates the parent scope. https://code.angularjs.org/1.7.5/docs/api/ng/type/$rootScope.Scope#$parent

In the HTML template:

<table>
    <tr data-ng-repeat="item in listTypes">
        <td>{{list.TaskId}}</td>
        <td>{{list.Comments}}</td>
        <td>{{list.RecordDate}}</td>
        <td>{{list.StartDate}}</td>
        <td>{{list.DueDate}}</td>
        <td>{{list.AssignTo}}</td>
        <td>{{list.AssignBy}}</td>
        <td>
             <label class="switch">
                 <input type="radio" ng-model="$parent.rdoModel" ng-value="item" >
             </label>
        </td>
    </tr>
</table>
 <button type="button" ng-click="Ok(rdoModel)">OK</button>

In the AngularJS controller script :

$scope.rdoModel={};
$scope.Ok = function(item){
var data = item ; // accesses all data of the list item
};

Answer 6

I have discovered a more efficient method than others. When utilizing "ng-model," there is no need for the name attribute, and by using "$parent," I believe we can access a single model to fulfill the role of the name attribute as well as bind data. This is due to the fact that each item has its own scope within ngRepeat, requiring a higher level approach to reach the defined single model.

The ngRepeat directive creates a template for each item in a collection. Each template instance has its own scope, where the loop variable represents the current collection item, and $index refers to the item's index or key. https://code.angularjs.org/1.7.5/docs/api/ng/directive/ngRepeat

$scope Properties : $parent indicates the parent scope. https://code.angularjs.org/1.7.5/docs/api/ng/type/$rootScope.Scope#$parent

In the HTML template:

<table>
    <tr data-ng-repeat="item in listTypes">
        <td>{{list.TaskId}}</td>
        <td>{{list.Comments}}</td>
        <td>{{list.RecordDate}}</td>
        <td>{{list.StartDate}}</td>
        <td>{{list.DueDate}}</td>
        <td>{{list.AssignTo}}</td>
        <td>{{list.AssignBy}}</td>
        <td>
             <label class="switch">
                 <input type="radio" ng-model="$parent.rdoModel" ng-value="item" >
             </label>
        </td>
    </tr>
</table>
 <button type="button" ng-click="Ok(rdoModel)">OK</button>

In the AngularJS controller script :

$scope.rdoModel={};
$scope.Ok = function(item){
var data = item ; // accesses all data of the list item
};

Getting Data from Selected Radio Buttons in AngularJS Using ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

Can you identify the reason for the hydration issue in my next.js project?

Analyzing input from the user for string comparison

I am looking to transfer information in CodeIgniter from a view utilizing AJAX post, handle that information in the controller, and then return the resultant array back to the view

Issue with modal input causing directive template to not render

I need to retrieve the Instagram follower count for a specific user using JavaScript based on their user ID

Error encountered: jquery form validation fails to register changes

json array: Tips for adding elements to a new array

The function json.stringify fails to invoke the toJson method on every object nested within the main object

script locate the div ID within a given text and clear its content

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

Mastering the Art of Parsing Complex JSON Data

JavaScript generated form fails to submit

Activate typeahead-on-select in Angular UI Typeahead when ng-model changes

Eliminating the table header in the absence of any rows

Running a JavaScript script after loading a page via AJAX is not functioning as expected

The validation feature in ASP.NET MVC does not seem to be functioning properly while using

Enhance your Next.js routing by appending to a slug/url using the <Link> component

Peculiar redirection encountered while handling a form with checkbox option

Retrieving a json file from a local server by utilizing angularjs $http.get functionality

Menus that mimic the style of Google Translate's select options