Count & print the checked inputs with AngularJS

Question

I used ng-repeat to print the list of input checkbox. How do I count and print the number of checked checkboxes?

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.lists = [{'id':'1', 'name':'list 1'},
                    {'id':'2', 'name':'list 2'},
          {'id':'3', 'name':'Macbook Pro'},
          {'id':'4', 'name':'Dell Optiplex 755'},
          {'id':'5', 'name':'Google Nexus S'}
          ];
});

HTML

<ul style="padding:10px;">
  <input type="text" ng-model="fil.name" />
  <li ng-repeat="list in lists | filter:fil">
    <div style="margin-bottom:0;" class="checkbox">
      <label>
        <input type="checkbox" name="list_id[]" value="{{list.id}}" />
           {{list.name}}
      </label>
    </div>
  </li>
</ul>

http://plnkr.co/edit/4swnCWen370VhTuca0u2?p=preview

Stewie · Accepted Answer · 2013-06-13 09:45:27Z

JS:

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

app.controller('MainCtrl', function($scope) {

  $scope.lists = [
    {'id':'1', 'name':'list 1', checked: true},
    {'id':'2', 'name':'list 2'},
    {'id':'3', 'name':'Macbook Pro'},
    {'id':'4', 'name':'Dell Optiplex 755'},
    {'id':'5', 'name':'Google Nexus S'}
  ];

  $scope.$watch('lists', function(lists){
    $scope.count = 0;
    angular.forEach(lists, function(list){
      if(list.checked){
        $scope.count += 1;
      }
    })
  }, true);

});

VIEW:

<body ng-controller="MainCtrl">

  <ul style="padding:10px;">
    <input type="text" ng-model="fil.name" />
    <li ng-repeat="list in lists | filter:fil">
      <div style="margin-bottom:0;" class="checkbox">
        <label>
          <input type="checkbox" name="list_id[]" ng-model="list.checked" value="{{list.id}}" />
             {{list.name}}
        </label>
      </div>
    </li>
  </ul>

  <strong>Count: {{count}}</strong>
</body>

Plnkr

Collectives™ on Stack Overflow

Count & print the checked inputs with AngularJS

JavaScript

HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JavaScript

HTML

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related