AngularJS: Как отключить флажки после указанной суммы?

У меня есть флажки в цикле, как показано ниже:

 <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 флажков и не более того (из общего количества элементов в списке i.e 100 или 200 и т.д.).

Как это сделать, используя angular js?

Помощь будет действительно оценена.

Спасибо.

Ответ 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 флажков.

Изменить: извините, забыл нажимать обновление на скрипке, теперь он должен работать. Также обратите внимание, что ограничение установлено на 4 с помощью $scope.limit = 4;

Ответ 2

вы можете запросить количество элементов и использовать ng-disabled

<input type="checkbox" ng-disabled="!item.value && items.length > 50" />

Обновление:

как указано в комментариях, ответ неверен. Но я думаю, что вы получили (и другие ребята, которые ответили) правильную идею, как выполнить то, что вам нужно. Я думаю, необходимая информация для вас - это использовать ng-disabled.

Мне нравится Aperçu ответить больше всего:)