Удаление элемента из массива в AngularJS без сервера

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

Для мгновенного удаления элемента из массива, который находится в $scope AngularJS, можно использовать метод splice. Воспользуйтесь приведенным ниже кодом:

$scope.myArray.splice($scope.myArray.indexOf(item), 1);

Убедитесь, что переменная item содержит именно тот объект, который нужно удалить из массива $scope.myArray. Этот краткий код выполнит поиск заданного элемента и его удаление.

Подготовка к операции

Перед внесением изменений в массив $scope, нужно выполнить несколько подготовительных действий:

1. Убедитесь, что массив корректно определён в текущей области видимости и готов к использованию.
2. Удостоверьтесь, что элемент, который собираетесь удалить, действительно присутствует в массиве, чтобы избежать возникновения ошибок.
3. Определитесь со стратегией управления массивом после удаления элемента.

Эффективные стратегии удаления

Удаление на лету с помощью $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();
});

Заключение

После того, как вы выполнили все операции с массивом, не забудьте обновить связанные с ним представления и бизнес-логику для поддержания работоспособности приложения.