CODEWITHSUNDEEP
javascriptangularjs
Semih Gokceoglu
Semih Gokceoglu

Reputation: 1428

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

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.

Upvotes: 3

Views: 5059

Answers (3)

zokaee hamid
zokaee hamid

Reputation: 542

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
};

Upvotes: 1

msohns
msohns

Reputation: 101

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

Upvotes: 1

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

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
};

Upvotes: 2

Related Questions