AngularJS Как удалить элемент из области действия

Простой список ToDo, но с кнопкой удаления на странице списка для каждого элемента!

1. Соответствующий шаблон 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>

2. Релевантный метод контроллера:

$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)

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

Любые идеи?

Решение:

Для индекса использовался правильный подход в HTML:
Однако просто изменить параметр angular на (idx) было недостаточно, мне пришлось создать экземпляр этого человека для отправки на сервер для удаления.
```
$scope.delete = function (idx) {

    var delPerson = $scope.persons[idx];

    API.DeletePerson({ id: delPerson.id }, function (success) {

        $scope.persons.splice(idx, 1);
    });
};
```

Спасибо, ребята!

Angular БОЛЬШОЙ, и я призываю всех, кто еще не проверил это! };

Ответы

Ответ 1

Ваша проблема не связана с Angular, но с методами Array. Правильный способ удаления особого элемента из массива - Array.splice. Кроме того, при использовании ng-repeat у вас есть доступ к специальному свойству $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);
  });
};

Ответ 2

Вам нужно найти индекс person в вашем массиве persons, а затем использовать массив splice метод

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

Ответ 3

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

без (DOC)

without_.without(array, * values) Возвращает копию массива со всеми экземплярами удаленных значений.

_. без ([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}));

См. демонстрацию в Fiddle

фильтр (DOC)

var evens = _.filter([1, 2, 3, 4, 5, 6], функция (num) {return num% 2 == 0;});

= > [2, 4, 6]

Пример

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

См. демонстрацию в Fiddle

Ответ 4

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

это работает для меня!

Ответ 5

Если у вас есть функция, связанная с списком, когда вы создаете функцию сращивания, ассоциация также удаляется. Мое решение:

$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) ] });
    });
};

Параметр списка называется items. Параметр x.done указывает, будет ли элемент удален.

Другие ссылки: Другой пример

Надеюсь помочь тебе. Привет.

Ответ 6

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

А, я выяснил причину... Я использую метод chunk для создания двух столбцов в моей таблице, наблюдая за моими объектами $scope.items. Извините!

Ответ 7

Вы также можете использовать этот

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

Ответ 8

Angular имеют встроенную функцию arrayRemove, в вашем случае метод может быть просто:

arrayRemove($scope.persons, person)

Ответ 9

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