Arhn - архитектура программирования

разные флажки «выбрать все» для разных списков флажков, angularjs

На моей странице у меня есть три списка флажков. Каждый список имеет собственный флажок «выбрать все». Я не хочу увеличивать код дублирующими строками, поэтому использую ту же функцию с параметром для выбора определенного списка флажков

      $scope.selectAll = function(array) {
            angular.forEach(array, function(item) {
                 item.Selected = $scope.model.selectedAll;
             });
       };

HTML

   <input type="checkbox"
            ng-model="model.selectedAll" 
            ng-change="selectAll(categories)" >

Это дает мне желаемый результат, я могу установить все флажки в определенном массиве. Но вот проблема. $scope.model.selectedAll относится ко всем спискам, и когда я выбираю все в одном списке, флажок «выбрать все» проверяется во всех списках.

Я прекрасно понимаю эту проблему, просто понятия не имею, как ее решить. Я думал о создании 3 разных переменных для каждого списка, но я использую функцию с параметром, где массив неизвестен, поэтому я не могу связать с ней определенную переменную, и она не будет работать.

Есть ли способ решить эту проблему без дублирования кода для определенного списка флажков?

заранее спасибо.

вот мой плункер

javascript checkbox angularjs
07.11.2016

  • Не могли бы вы передать логическое значение в $scope.selectAll(), чтобы выбрать, следует ли выбрать или отменить выбор, вместо того, чтобы искать узел DOM внутри функции? 07.11.2016
  • @ebyrob, если я передаю логическое значение, переедание будет только в одном случае, оно будет ложным или истинным. 07.11.2016

Ответы:


1

То, как вы это сделали, связывает набор несвязанных сущностей с одной и той же моделью, что означает, что вы очень тесно их связываете. Очевидно, что цель состоит в том, чтобы разделить их, поэтому вам понадобится другая модель, и есть несколько способов сделать это.

Использование полностью уникальных моделей

Один из способов сделать это — просто сделать ваш код немного более общим, а затем создать ряд уникальных моделей, связанных с каждым флажком, например так:

html

<input type="checkbox"
       ng-model="model1.selectedAll" 
       ng-change="selectAll(categories1, model1.selectedAll">

JS

$scope.selectAll = function(array, value) {
  angular.forEach(array, function(item) {
    item.Selected = value;
  });
};

Использование базовой модели

В качестве альтернативы, если вы не хотите отслеживать несколько переменных, вы можете инкапсулировать их в одну базу. Этот метод полезен, если у вас есть динамически создаваемые элементы.

html

<input type="checkbox"
       ng-model="modelSet[key].selectedAll" 
       ng-change="selectAll(categories, key)">

JS

$scope.selectAll = function(array, key) {
  angular.forEach(array, function(item) {
    item.Selected = $scope.modelSet[key].selectedAll;
  });
};

Что бы вы ни делали, обратите внимание, что ваша функция выбора получает больше информации из представления и меньше информации из $scope. Вы хотите предоставить служебной функции как можно больше контекста, чтобы ее можно было повторно использовать более надежно.

07.11.2016
  • Спасибо, Доминик, второй способ - это именно то, что я искал. 07.11.2016
  • Рад, что смог помочь :) 07.11.2016
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..