How to get selected value from table using Angular.js

Question

I need some selected value using check box select using Angular.js. My code is 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.

Muhammad Abid · Accepted Answer · 2016-03-10 03:37:38Z

1

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

  };
}

edited Mar 10, 2016 at 3:37

answered Mar 10, 2016 at 3:19

Muhammad Abid

8014 silver badges12 bronze badges

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

3 Comments

satya Over a year ago

in your case you are setting static data in controller side function and inside you are setting Boolean condition but can you edit my code using your way?

Muhammad Abid Over a year ago

even if checked property does not exist in object , you still can use it in html. please have a look at updated code in plnker and above. let me know if you need help to understand it.

satya Over a year ago

yes,its coming properly.Let me to implement those in my code.

Collectives™ on Stack Overflow

How to get selected value from table using Angular.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related