How do I count selected checkboxes in Angular?

Viewed 12294

I need to count the number of items I have selected in a list.

I have the following list:

<ul>
  <li ng-repeat="items in item">
    <input type="checkbox" name="item_id[]" />
  </li>
</ul>

Is there something like var count = $scope.item.selected.count ?

update
Thanks to @Stewie I got it working.

I ended up using this code:

    // Count the number of selected items
    $scope.selectedCounter = 0;
    $scope.change = function (item) {
        if (item.selected) {
            $scope.selectedCounter++
        } else {
            $scope.selectedCounter--
        }
    };

    // HTML
    <ul>
      <li ng-repeat="item in items">
        <input type="checkbox" ng-model="item.selected" ng-change="change(item)" />
      </li>
      ...
    </ul>

    <span>Count: </span> ({{selectedCounter}})

If you also have a select all checkbox

<input type="checkbox"  ng-model="selected" class="checkAll" ng-change="selectAll(selected)" />

Then the code will be:

    $scope.selectAll = function (selected) {
        var items = $scope.items;
        angular.forEach(items, function (item) {
            item.selected = selected;
        });
        // Update the counter
        if(selected){
            $scope.selectedCounter = items.length;
        } else {
            $scope.selectedCounter = 0;
        }
    };
1 Answers
Related