Привязка списка значений чекбоксов в AngularJS: ng-model

Быстрый ответ

Для создания связи между списком значений чекбоксов и моделью в AngularJS, следует применить директиву ng-model к каждому элементу массива. Используя ng-repeat, можно перебрать все элементы, управляя выбранными пунктами через булево свойство. Взгляните на следующий простой пример:

<div ng-repeat="item in items">
    <input type="checkbox" ng-model="item.checked">{{ item.name }}
</div>

В контроллере задается:

$scope.items = [
    { name: 'Опция 1', checked: false },
    { name: 'Опция 2', checked: false }
];

Выбор чекбокса будет приводить к изменению состояния свойства item.checked на true или false.

Управление динамическими выборами

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

$scope.selectedItems = [];

$scope.toggleSelection = function(item) {
    var idx = $scope.selectedItems.indexOf(item);
    
    if (idx > -1) {
        $scope.selectedItems.splice(idx, 1);
    } else {
        $scope.selectedItems.push(item);
    }
};

Работа с объектами внутри массивов

При работе с массивами объектов и привязкой их к чекбоксам, воспользуйтесь таким подходом:

$scope.items = [
    { id: 1, label: 'Опция 1', isSelected: false },
    { id: 2, label: 'Опция 2', isSelected: false }
];

$scope.toggleSelection = function(item) {
    item.isSelected = !item.isSelected;
};

Подробнее об этом расскажет наш спикер на видео

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

В сложных приложениях для упрощения работы и улучшения масштабируемости может быть полезно использовать директивы, такие как checkList:

app.directive('checkList', function() {
    return {
        scope: {
            list: '=checkList',
            value: '@'
        },
        link: function(scope, elem) {
            var handler = function(setup) {
                var checked = elem.prop('checked');
                var index = scope.list.indexOf(scope.value);

                if (checked && index == -1) {
                    if (setup) elem.prop('checked', false);
                    else scope.list.push(scope.value);
                } else if (!checked && index != -1) {
                    if (setup) elem.prop('checked', true);
                    else scope.list.splice(index, 1);
                }
            };
            
            var setupHandler = handler.bind(null, true);
            var changeHandler = handler.bind(null, false);

            elem.on('change', function() {
                scope.$apply(changeHandler);
            });
            scope.$watch('list', setupHandler, true);
        }
    };
});

Такую директиву можно применять в коде страницы следующим образом:

<input type="checkbox" check-list="selectedItems" value="option1">

Обратная связь пользователю

Подтверждение действий пользователя обновлением привязанных данных в реальном времени помогает ему ощущать контроль над процессом. В AngularJS достаточно использовать фигурные скобки {{}}:

<div ng-repeat="item in items">
    <input type="checkbox" ng-model="item.checked"> {{ item.name }}
    <span ng-show="item.checked">Выбрано!</span>
</div>

Особенности синтаксиса и возможные ошибки

Необходимо различать корректное обозначение массивов и объектов в AngularJS. Ошибки могут приводить к неожиданным результатам:

$scope.selectedItems = [];    // Это массив
$scope.settings = { checked: false }; // А это объект

Не забывайте о мутабельности массивов; ng-model может не отслеживать изменения в подсвойствах массива. В таких случаях рекомендуется использовать $watchCollection или глубокий $watch.

Визуализация

Разберем, как происходит привязка списка чекбоксов в AngularJS на конкретном примере:

Бюллетень AngularJS (📝): [Опция A, Опция B, Опция C]

Выбор пользователя ([✅, ❌, ✅]):

📝🗳️ Магия привязки:
- Опция A: ✅
- Опция B: ❌
- Опция C: ✅

AngularJS работает как интерактивная система голосования, автоматически обновляясь в ответ на выбор пользователя (✅) или отказ от выбора (❌):

$scope.userChoices = {
    optionA: true,
    optionB: false,
    optionC: true
};

// Директива ng-model в представлении синхронизируется с выбором пользователя.

Так, каждый чекбокс функционирует как уникальный выбор, информация о котором обновляется мгновенно. 🌟

Работа с большими наборами данных

Использование фильтров и $watch

Встроенные фильтры и наблюдатели в AngularJS обеспечивают реактивность и динамичное взаимодействие:

$scope.$watch('items', function(items) {
    $scope.selectedItems = items.filter(function(item) {
        return item.checked;
    });
}, true);

Этот $watch обновляет массив selectedItems при любых изменениях в исходном массиве items, дополняя реактивность приложения.

Оптимизация производительности с помощью ng-change

При взаимодействии с большими списками актуален вопрос производительности. Применение директивы ng-change может помочь улучшить ее по сравнению с $watch, так как директива реагирует на действия пользователя, а не на каждый цикл проверки состояния:

<input type="checkbox" ng-model="item.checked" ng-change="toggleSelection(item)">

Полезные материалы

1. AngularJS — API документация директивы ngModel от AngularJS.
2. AngularJS — информация о директиве ng-change в приложениях на AngularJS.
3. Как привязать список значений чекбоксов с помощью AngularJS? – Stack Overflow — обсуждение темы привязки чекбоксов с помощью AngularJS на Stack Overflow.
4. AngularJS – API документация директивы ngChecked для управления чекбоксами.
5. Учебник | DigitalOcean — пояснение двусторонней привязки данных в AngularJS.
6. – YouTube — видеоурок о привязке чекбоксов в AngularJS на YouTube.