Question

我正在尝试使用checkboxes中的AngularJS创建一个包含多个选项的菜单。我已经为我的DB建模了我想在逻辑中使用的2个属性; min_selection_points和max_selection_points。我的想法是，我将使用它们来跟踪我的checkboxes已被选中的数量，一旦达到max_selection_points，我将停用checkboxes的其余部分。

假设我有6个checkboxes和max_selection_points = 2，当选中2个复选框时，如果取消选择1，则禁用剩余的4个checkboxes，然后重新启用它们，因为选择次数未达到2，即最大值。我打算在按下min_selection_points时使用button作为验证，因此我希望能够计算已选中复选框的数量，或者在达到bool时设置max_selection_points ......到目前为止，这是我的代码;

<div class="group-items" ng-if="modifier.max_selection_points > 1 || (modifier.max_selection_points == 1 && modifier.min_selection_points == 0)">
    <div ng-repeat="item in modifier.menu_modifier_items" class="modifier-item multiple">
        <label for="<%modifier.id + '_' + item.id%>">
            <input id="<%modifier.id + '_' + item.id%>"
                   class="checkbox-branded"
                   type="checkbox"
                   name="<%item.name%>"
                   ng-model="item.selected"
                   ng-class="{'not-available': !item.available}"
                   title="<%item.name%>"
                   value="<%item.id%>">
    <span class="item-name">
        <span ng-bind="item.name"></span>
        <span ng-bind="priceDelta(modifier, item)"></span>
    </span>
        </label>
    </div>
</div>

我相信我需要使用ng-click和ng-change来实现这个逻辑，所以我有：

ng-click="modifierClicked(item)"
ng-change="modifierSelected(item)"

任何指导意见

Answer 1

您可以使用一个函数返回已选中复选框的数量：

$scope.Checked = function() {
    var count = 0;
    angular.forEach($scope.modifier.menu_modifier_items, function(item){
        count += item.selected ? 1 : 0;
    });
    return count; 
}

然后你可以在每个输入上禁用ng：

ng-disabled="!item.selected && Checked== modifier.max_selection_points"

您可以尝试此plunker

Answer 2

以前的答案提议卢卡斯罗德里格斯是对的，但是那个掠夺者很奇怪。

$scope.max_selection_points = 2;

$scope.questions = [{
  id: 21,
  answer: "Chicago"
}, {
  id: 22,
  answer: "New York"
}, {
  id: 23,
  answer: "Los Angeles"
}, {
  id: 24,
  answer: "London"
}, {
  id: 25,
  answer: "Moskva"
}];
$scope.countChecked = function() {
  var count_ = 0;
  angular.forEach($scope.questions, function(quest) {
    if (quest.checked)
      count_++;
  });
  return count_;
}

<div ng-repeat="question in questions">
  <label>
    <input ng-disabled="!question.checked && max_selection_points==countChecked()" type="checkbox" ng-model="question.checked">{{ question.answer }}
    <br/>
  </label>
</div>

这是正确的plunker。

使用ng-repeat处理多个复选框 - AngularJS

2 个答案: