Reputation: 1428
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
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
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
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