0

我使用 ng-repeat 打印输入复选框列表。如何计算和打印选中复选框的数量？

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

4

1 回答 1

1

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);

});

看法：

<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

于 2013-06-13T09:45:27.547 回答