Get value from multiple checkboxes in AngularJS

Question

Following is my code in which I am trying to get values of multiple checkboxes selected, but some how its not working. Let me know what I am doing wrong here, BTW the list is dynamic and not going to contain only 3 items in an array.

My Plnkr - PLNKR CODE

HTML -

    <table>
    <tr ng-repeat="student in studentList">
   <td ng-bind="$index + 1"></td>
   <td ng-bind="student.email"></td>
   <td ng-bind="student.fname"></td>
   <td ng-bind="student.lname"></td>
   <td>
    <input type="checkbox" ng-model="studcheck" ng-value="$index" />
   </td>
</tr>
</table>
{{studcheck}}

CONTROLLER CODE -

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

myApp.controller('mainCtrl', function($scope){
  $scope.studentList = [
    {email: '[email protected]', fname: 'Test1', lname: 'Last1' },
    {email: '[email protected]', fname: 'Test2', lname: 'Last2' },
    {email: '[email protected]', fname: 'Test3', lname: 'Last3' },
  ];

  $scope.studcheck = {};
});

Daniel Perez · Accepted Answer · 2015-05-24 08:16:47Z

3

You cannot use ng-model multiple times on the same model, but here just specify the key and it should be fine:

<input type="checkbox" ng-model="studcheck[$index]" ng-value="$index" />

If you want to update the student model to know if it is checked or not, you could try using ng-change:

<input type="checkbox" ng-model="studcheck[$index]" ng-value="$index" ng-change="student.checked = !student.checked" />

edited May 24, 2015 at 8:16

answered May 24, 2015 at 8:04

Daniel Perez

7,1314 gold badges26 silver badges28 bronze badges

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

9 Comments

Poyraz Yilmaz Over a year ago

You are okay with binding one parameter to all checkboxes, but I believe he is trying to do set different values for each checkbox where ng-value is not works for checkbox...

Daniel Perez Over a year ago

ng-value is working correctly here. Check the produced HTML, then input value is indeed equal to $index.

Poyraz Yilmaz Over a year ago

can you provide plunker for this?

Tech Solvr Over a year ago

Thx a lot..it works !! just as a suggestion I am getting data now like - { 1=true, 3=true} can I improve this too ..means {Student_email: <>, checked: <>} something like this

Poyraz Yilmaz Over a year ago

@TechSolvr just change ur inbox with this <input type="checkbox" ng-model="student.checked"/> and you will see student.checked true or false...

|

Collectives™ on Stack Overflow

Get value from multiple checkboxes in AngularJS

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related