How to get selected radio button data in AngularJS (ng-repeat)

Question

I need to get selected row data(id, name) with radio button. To be specific;

<tr data-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>

When selected radio button, I should get the datas(taskId, comments), which is selected row. Which function should I use it? (specially I need JS part) Thanks for any help.

Shashank Agrawal · Accepted Answer · 2015-01-19 13:01:51Z

2

You can make use of ng-model for your checkbox which can be used as following:

<tr data-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" ng-model="list.selected" ng-change="onTaskSelect(list)">
         </label>
    </td>
</tr>

Now your controller code will look something like this:

$scope.onTaskSelect = function(task) {
    // access your whole task object here.
    console.log(task.selected);    // will be true when you select it or else false
};

answered Jan 19, 2015 at 13:01

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

msohns · Accepted Answer · 2015-01-19 13:02:04Z

1

First you need to assign a ng-model to your radio button and change your ng-value to something like the list.TaskId

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

Now that you have the list.TaskId you can use Array.prototype.filter to look for the data in listTypes

answered Jan 19, 2015 at 13:02

msohns

1015 bronze badges

2 Comments

msohns Over a year ago

Shashank Agrawal answer is cleaner

Semih Gokceoglu Over a year ago

Right. Thats what I need. Thank you for your answer btw.

zokaee hamid · Accepted Answer · 2018-12-17 19:59:15Z

I found a way better than other. when we use "ng-model" don't need the name attribute and because of the use of "$parent" I think to access a single model to play the role of the name attribute and also binding data. Therefore, because of the following quotes, as each item has a scope, we must have a higher level to achieve the single model that we define.

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. https://code.angularjs.org/1.7.5/docs/api/ng/directive/ngRepeat

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

in template HTML :

<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 Angularjs controller script :

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

Collectives™ on Stack Overflow

How to get selected radio button data in AngularJS (ng-repeat)

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related