Idris Idris - 4 days ago 6
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>{{item.name}}</label>
</div>


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

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

Demo

Comments