Обработка нескольких флажков с помощью ng-repeat - AngularJS

Question

Обработка нескольких флажков с помощью ng-repeat - AngularJS

0

Я пытаюсь создать меню с несколькими параметрами, которые можно выбрать с помощью checkboxes в AngularJS. Я смоделировал свою DB двумя атрибутами, которые я хочу использовать в своей логике; min_selection_points и max_selection_points. Идея заключается в том, что я буду использовать их, чтобы отследить, сколько из моих checkboxes были выбраны и после того, как max_selection_points Достигнуты я затем отключить остальные checkboxes.

Так что если предположить у меня 6 checkboxes и max_selection_points = 2, когда 2 Флажки проверяются отключить 4 оставшихся checkboxes, когда 1 выключенной я повторно включить их все, потому что количество выбора не достигло 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)"

Любое руководство

moh_abk 01 фев. 2016, в 03:55

Источник

Теги:

angularjs

2 ответа

0

Предыдущий ответ предложил Лукасу Родригесу право, но плункер странный.

$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>

Это правильный плункер.

Stepan Kasyanenko 01 фев. 2016, в 01:47

Ещё вопросы

Lucas Rodriguez · Accepted Answer · 2016-02-01T01-29-00.000Z

У вас может быть функция, которая возвращает количество отмеченных флажков:

$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"

Вы можете попробовать этот плункер