Привязка списка значений чекбоксов в 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)">
Полезные материалы
- AngularJS — API документация директивы ngModel от AngularJS.
- AngularJS — информация о директиве ng-change в приложениях на AngularJS.
- Как привязать список значений чекбоксов с помощью AngularJS? – Stack Overflow — обсуждение темы привязки чекбоксов с помощью AngularJS на Stack Overflow.
- AngularJS – API документация директивы ngChecked для управления чекбоксами.
- Учебник | DigitalOcean — пояснение двусторонней привязки данных в AngularJS.
- – YouTube — видеоурок о привязке чекбоксов в AngularJS на YouTube.