AngularJS : How to disable checkboxes after specified amount is selected?

Question

我在循环中有复选框，如下所示:

 <li ng-repeat="item in items">
      <h2>  {{item.better}}</h2>
      <span>{{item.startTime}}</span>
      <b>   {{item.lengthTime}}</b>
      <input type="checkbox" checklist-model="item.winner" checklist-value="item">
 </li>

我想设置限制，以便用户最多只能选择 50 个复选框，并且不能超过(列表中的总项目数，即 100 或 200 等)。

我们如何使用 angular js 实现这一点？

帮助将不胜感激。

谢谢你。

Answer 1

FIDDLE

$scope.checkChanged = function(item){
    if(item.winner) $scope.checked++;
    else $scope.checked--;
}

和

 <input type="checkbox" ng-model="item.winner" ng-change="checkChanged(item)" ng-disabled="checked==limit && !item.winner"/>

这会跟踪检查 ng-change 并在达到限制且未选中复选框时禁用它们。

不使用 $watch 因为可能有大约 200 个复选框。

编辑:抱歉忘了点击 fiddle 上的更新，它现在应该可以工作了。另请注意，使用 $scope.limit = 4 将限制设置为 4 ;