Idris Idris - 9 months ago 83
AngularJS Question

how to count the checkbox which was checked using angular?

Here, I used $watch to display the counter value.

But the counter value not increased yet,

To Count,

$scope.$watch('items', function(items){
var selectedItems = 0;
angular.forEach(items, function(item){
selectedItems += item.selected ? 1 : 0;
$scope.selectedItems = selectedItems;
}, true);

In UI,

<div class="col-sm-4" ng-repeat="item in items">
<label class="chkbox-holder cbox mbot10" for="List-{{$index}}"><input ng-model="item.Selected" type="checkbox" id="List-{{$index}}"><label for="List-{{$index}}"></label>{{}}</label>

To display the counter value,

<div>Selected Items Length: {{selectedItems}}</div>

But still the counter is 0;

JSON Value from http service is,

"id": 1,
"refCode": "",
"name": "pragadees"
"id": 2,
"refCode": "",
"name": "pragadees"

Can anyone please help on this.

Answer Source

You've just got a typo error. Your markup is bound to item.Selected while your JavaScript is checking for item.selected. Renaming them properly solves your problem. I'd recommend using lower key inside ot html.

<input ng-model="item.selected" type="checkbox" id="List-{{$index}}">
                      ^-- See here