Binding an unique value from a table to ng-model of a check box

Question

I have a table(which is populated with the data that is received from back end using ng-repeat.)Each of the rows have a check box and if the check box is selected(multiple) i want to send a request to the server to delete the rows.To do this i want to bind my check box to an unique field in my table but am unable to get the right syntax. i tried the below options that i read in SO but nothing seems to work.

  <input type="checkbox" ng-model="demo.Custid" >//this replaced the value in the table with true or false.

  <input type="checkbox" ng-model="formData.checkboxes[demo.Custid]" >//this gave me values in the below  format {"12500":true,"125001":false}

Is there anyway i can get the value of the customer id(in this case)directly bound to the ng-model uniquely?I want to get these values and send a request to the server to delete the data from the table for the corresponding customer.

 .controller('Controller1',function($scope,$rootScope,$routeParams){
 $scope.name = 'Controller1';
 $scope.params = $routeParams;
 $scope.formData = {
            checkboxes: {}

                   };
 $scope.demos = [
                 { 'Account':'abc.com',
                   'Custid': 125000,
                    },
                   {'Account':'abc.com',
                   'Custid': 125001, },
                     { 'Account':'abc.com',
                   'Custid': 125002,}
                 ]


         })

I am new to angular js and any help/pointers would be really helpful.

RobbyD · Accepted Answer · 2016-04-28T14:08:41.333

Use ng-click.

You already have an ng-repeat looping over demo. Seeing $scope.demos and demo.Custid, I assume you just did

ng-repeat="demo in demos".

Now just pass that demo.Custid to a function defined on the scope using ng-click="myfunction(demo.Custid)"

I adapted your code a little to make it easy for myself but this should be pretty obvious:

Edit : I just realized I was using an angular 1.01 template in jsfiddle to create this code, I'll leave it but here's a fiddle to a working example in angularjs 1.5.5

index.html

<div ng-controller="Controller1">
  <input type="submit" ng-click="sendToBackend()">
  {{name}}
  <table>
    <thead><tr><td>Select</td><td>Customer</td></tr>
    </thead>
    <tbody>
      <tr ng-repeat="demo in demos">
        <td><input type="checkbox" ng-click="addToList(demo.Custid)"></td>
        <td>{{demo.Custid}}</td>
      </tr>
    </tbody> 
  </table>
  <ul>
    <li ng-repeat="check in checkboxes">{{check}}</li>
  </ul>
</div>

myapp.js

var myApp = angular.module('myApp', []);

function Controller1($scope) {
   $scope.name = 'Controller1';
   $scope.checkboxes = [];
   $scope.demos = [{Account: 'abc.com',Custid: 125000,}, 
                   {Account: 'abc.com',Custid: 125001,}, 
                   {Account: 'abc.com',Custid: 125002,}];
   $scope.addToList = function(id) {
      $scope.checkboxes.push(id);
   };
   $scope.sendToBackend = function() {
      alert("sending " + $scope.checkboxes.length + " items to backend");
   };

};

From here on you should be able to do everything that you want with it. If you have more specific questions, shoot!

Thanks for the reply Robby.I tried your method .it's perfect except that if the user clicks on the check box and then uncheck it , the value will still be added to the list that is to be deleted . — Batman, Apr 28 '16 at 15:29
One way you could do that is by passing the event so that in your html this becomes ng-click="addToList($event, demo.Custid") and in your function definition $scope.addToList = function($event, id). Then check if $event.target.checked is true and add it to the array, if false search for it in the array and remove it. See [link](http://stackoverflow.com/questions/9792927/javascript-array-search-and-remove-string). Of course the function should probably be renamed to updateList instead. Also, if this answered your questions please mark my reply as the accepted answer. — RobbyD, Apr 28 '16 at 15:41
Thank so much Robby.I just tried it out today and It works perfectly :) — Batman, May 04 '16 at 06:43

Binding an unique value from a table to ng-model of a check box

1 Answers1