Як видалити елемент з масиву в області AngularJS?

Простий список справ, але з кнопкою видалення на сторінці списку для кожного елемента:

Відповідний HTML шаблону:

<tr ng-repeat="person in persons">
  <td>{{person.name}} - # {{person.id}}</td>
  <td>{{person.description}}</td>
  <td nowrap=nowrap>
    <a href="#!/edit"><i class="icon-edit"></i></a>
    <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
  </td>
</tr>

Відповідний метод контролера:

$scope.delete = function (person) {
  API.DeletePerson({ id: person.id }, function (success) {
    // I need some code here to pull the person from my scope.
  });
};

Я спробував $scope.persons.pull(person)і $scope.persons.remove(person).

Хоча база даних успішно видалена, я не можу витягнути цей елемент із сфери застосування, і я не хочу здійснювати виклик методу на сервер для даних, які клієнт вже має, я просто хочу видалити цю людину з області дії.

Будь-які ідеї?

Ваша проблема насправді не з кутовим, а з методами Array. Правильний спосіб видалити конкретний елемент із масиву - це Array.splice. Також при використанні ng-повтору ви маєте доступ до спеціального $indexвластивості, що є поточним індексом масиву, який ви передали.

Рішення насправді досить просте:

Вид:

<a ng-click="delete($index)">Delete</a>

Контролер:

$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};

Вам доведеться знайти індекс personв своєму personsмасиві, а потім скористатися spliceметодом масиву :

$scope.persons.splice( $scope.persons.indexOf(person), 1 );

Я використовував би бібліотеку Underscore.js, яка містить список корисних функцій.

without

without_.without(array, *values)

Повертає копію масиву зі всіма видаленими екземплярами значень.

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
// => [2, 3, 4]

Приклад

var res = "deleteMe";

$scope.nodes = [
  {
    name: "Node-1-1"
  },
  {
    name: "Node-1-2"
  },
  {
    name: "deleteMe"
  }
];
    
$scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {
  name: res
}));

Дивіться демо в JSFiddle .

filter

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

// => [2, 4, 6]

Приклад

$scope.newNodes = _.filter($scope.nodes, function(node) {
  return !(node.name == res);
});

Дивіться демонстрацію у Фідділі .

$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

це працює для мене!

Якщо у вас є якась функція, пов’язана зі списком, під час створення функції зрощення, асоціація також видаляється. Моє рішення:

$scope.remove = function() {
    var oldList = $scope.items;
    $scope.items = [];

    angular.forEach(oldList, function(x) {
        if (! x.done) $scope.items.push( { [ DATA OF EACH ITEM USING oldList(x) ] });
    });
};

Параметр списку називається предметами . Параметр x.done вказує, чи буде елемент видалено.

Інші посилання: Ще один приклад

Сподіваюся, вам допоможуть. Привітання.

Для прийнятої відповіді @Joseph Silber не працює, тому що indexOf повертає -1. Це, мабуть, тому, що Angular додає хешкей, який відрізняється від мого $ range.items [0] та мого елемента. Я намагався вирішити це за допомогою функції angular.toJson (), але це не вийшло :(

Ах, я з'ясував причину ... Я використовую метод блоку, щоб створити два стовпчики в моїй таблиці, спостерігаючи за моїми $ range.items. Вибачте!

Ви також можете використовувати це

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });

У кутових є вбудована функція, яка називається arrayRemove, у вашому випадку метод може бути просто:

arrayRemove($scope.persons, person)

array.splice(array.pop(item));

Щоб видалити елемент із області застосування:

// remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };

Від введіть опис посилання тут