How to get selected value from table using Angular.js
Question
I need one help.I need some selected value using check box select using Angular.js.I am explaining my code below.
<tr dir-paginate="pro in listOfReview | itemsPerPage:5">
<td><input type="checkbox" ng-model="selected[pro.review_id]" ng-false-value="undefined"></td>
<td>{{$index+1}}</td>
<td>{{pro.Product_name}}</td>
<td>{{pro.title}}</td>
<td>{{pro.description}}</td>
<td>{{pro.rating}}</td>
<td ng-if="pro.status==0">Not Approved</td>
<td ng-if="pro.status==1">Approved</td>
<td ng-if="pro.status==1">
<a ui-sref="review">
<input type='button' class='btn btn-xs btn-red' value='Reject' ng-click="RejectStatus(pro.review_id,pro.status);" >
</a>
</td>
<td ng-if="pro.status==0">
<a ui-sref="review">
<input type='button' class='btn btn-xs btn-green' value='Approve' ng-click="ApproveStatus(pro.review_id,pro.status);" >
</a>
</td>
</tr>
<input type='button' class='btn btn-xs btn-green' value='Approve' ng-click="ApproveStatus();">
The controller side code is given below.
$scope.selected = {};
$scope.ApproveStatus=function(){
console.log('approve',$scope.selected);
}
right now i am getting the selected value like this approve Object {4: true} .Here i need to assign pro.review_id value to a key like( review:id:4 ) so that i can easily fetch those using loop.Here also my requirement is when at least one check box will select the Approve button present at bottom will display to the user.Please help me.
1 answers
solution1
1 ACCPTED 2016-03-10 03:19:13
plunker link Click here
You can bind an extra property with check box like I did below.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table>
<tr><td></td><td>Name</td><td>Type</td><td>Price</td></tr>
<tr ng-repeat="p in prods">
<td><input type='checkbox' value ="p.checked" ng-model="p.checked"></td>
<td>{{p.name}}</td>
<td>{{p.type}}</td>
<td>{{p.price}}</td>
<td>Delete</td>
<td>Modify</td>
</tr>
</table>
<input type="button" value="Approve" ng-click="ApproveStatus()" />
</div>
</body>
</html>
function Ctrl($scope) {
$scope.prods = [
{'id':'0', 'name' : 'Title1', 'type' : 'Zip code', 'price' : '11'},
{'id':'1', 'name' : 'Title2', 'type' : 'MD', 'price' : '222'},
{'id':'2', 'name' : 'Title3', 'type' : 'DMS', 'price' : '2222'}
];
$scope.ApproveStatus = function(){
console.log('value is:' + $scope.prods.length);
for(var i =0; i < $scope.prods.length ;i++){
if($scope.prods[i].checked){
console.log($scope.prods[i].id)
}
}
};
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.