I try to display how many checked checkboxes using this code
<li class="list-group-item" ng-repeat="user in data">
<input type="checkbox" ng-model="user.checked"/>
{{user.name}}
</li>
<p>total checked: {{user.checked.length}}</p>
I also tried count() within the {{}} but doesn't work.
You should filter users by checked property:
<p>total checked: {{ (data | filter:{checked: true }).length }}</p>
ng-model=user.checked (as it is in plunker) but the key is the attribute checked.
Markup:
<p>total checked: {{checkedCount()}}</p>
Controller:
$scope.checkedCount = function(){
return $scope.data.filter(function(person){
return person.checked;
}).length;
}
Array.filter isn't supported in IE8. source: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
You can create a function to calculate all the checked elements inside your controller:
$scope.calculateChecked = function() {
var count = 0;
angular.forEach($scope.data, function(value) {
if(value.checked)
count++;
});
return count;
};
and then in your HTML
<p>total checked: {{calculateChecked()}}</p>
{{user.checked|length}}?