Удаление элемента из массива в AngularJS без сервера
Быстрый ответ
Для мгновенного удаления элемента из массива, который находится в $scope
AngularJS, можно использовать метод splice
. Воспользуйтесь приведенным ниже кодом:
$scope.myArray.splice($scope.myArray.indexOf(item), 1);
Убедитесь, что переменная item
содержит именно тот объект, который нужно удалить из массива $scope.myArray
. Этот краткий код выполнит поиск заданного элемента и его удаление.
[AsideBanner]
Подготовка к операции
Перед внесением изменений в массив $scope
, нужно выполнить несколько подготовительных действий:
- Убедитесь, что массив корректно определён в текущей области видимости и готов к использованию.
- Удостоверьтесь, что элемент, который собираетесь удалить, действительно присутствует в массиве, чтобы избежать возникновения ошибок.
- Определитесь со стратегией управления массивом после удаления элемента.
Эффективные стратегии удаления
Удаление на лету с помощью $index
Для быстрого удаления элемента из массива при использовании директивы ng-repeat
можно воспользоваться переменной $index
:
<div ng-repeat="person in persons">
<span>{{ person.name }}</span>
<!-- Кнопка удаления. Один клик — и персона удалена! -->
<button ng-click="removePerson($index)">Удалить</button>
</div>
$scope.removePerson = function(index) {
// Выполняем операцию удаления
$scope.persons.splice(index, 1);
};
Удаление с проверкой целостности данных
При работе с базами данных вначале необходимо подтвердить успешное "удаление" на сервере, а уже затем обновлять информацию на стороне клиента:
$scope.deleteAndRemove = function(person) {
API.DeletePerson(person.id).then(function success() {
var index = $scope.persons.indexOf(person);
if (index !== -1) {
$scope.persons.splice(index, 1);
}
});
};
Сначала делайте запрос на удаление, используя API.DeletePerson
. После получения подтверждения через обратный вызов успеха, произведите удаление элемента из массива $scope.persons
.
Поиск и удаление по условию
Для удаления сразу нескольких элементов, удовлетворяющих заданным условиям, можно применять метод angular.forEach
:
angular.forEach($scope.persons, function(value, key) {
if (value.age < 18) {
$scope.persons.splice(key, 1);
}
});
Помощь из вне: внешние библиотеки
Если стандартные способы вы не нашли подходящего, то библиотеки, такие как Underscore.js или Lodash, смогут помочь вам при работе с массивами:
$scope.persons = _.without($scope.persons, _.findWhere($scope.persons, { id: person.id }));
Визуализация
Рассмотрим процесс удаления элемента из массива AngularJS с использованием метода filter на примере шахматной партии:
Шахматная страна населена фигурами: [ ♜,♞,♝,♛,♚,♜ ]
Королева "♛" решила уйти в отставку. Да будет теперь здесь без королевы...
$scope.chessPieces = $scope.chessPieces.filter(piece => piece !== ♛);
И вот, обновленный состав населения шахматной страны:
Теперь тут живут: [ ♜, ♞, ♝,♚, ♜ ]
Шах и мат: Королева ♛ покинула доску (массив)!
Неразрушающие тактики удаления
Если важно сохранить исходный массив без изменений, метод filter
позволяет создать его копию без удаляемых элементов:
$scope.filteredPersons = $scope.persons.filter(function(person) {
return person.age >= 18; // Совершеннолетние остаются в списке!
});
Сложные условия удаления
Если условия для удаления оказываются сложными, рекомендуется использовать filter
, чтобы код оставался понятным и аккуратным:
$scope.persons = $scope.persons.filter(function(person) {
return !person.shouldBeRemoved();
});
Заключение
После того, как вы выполнили все операции с массивом, не забудьте обновить связанные с ним представления и бизнес-логику для поддержания работоспособности приложения.