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

admin管理员组

文章数量:1429120

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, ments), which is selected row. Which function should I use it? (specially I need JS part) Thanks for any help.

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, ments), which is selected row. Which function should I use it? (specially I need JS part) Thanks for any help.

• javascript
• angularjs

Share Improve this question Follow edited Dec 25, 2015 at 14:47 Shashank Agrawal 25.8k1111 gold badges9696 silver badges125125 bronze badges asked Jan 19, 2015 at 12:46 Semih GokceogluSemih Gokceoglu 1,43822 gold badges1414 silver badges2222 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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
};

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

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/1.7.5/docs/api/ng/directive/ngRepeat

$scope Properties : $parent Reference to the parent scope. https://code.angularjs/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
};

本文标签： javascriptHow to get selected radio button data in AngularJS (ngrepeat)Stack Overflow