Como remover um item de uma matriz no escopo AngularJS?

Lista de tarefas simples, mas com um botão excluir na página da lista para cada item:

HTML do modelo relevante:

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

Método relevante do controlador:

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

Eu tentei $scope.persons.pull(person)e $scope.persons.remove(person).

Embora o banco de dados tenha sido excluído com êxito, não consigo extrair este item do escopo e não quero fazer uma chamada de método para o servidor para obter dados que o cliente já possui, só quero remover essa pessoa do escopo.

Alguma ideia?

Seu problema não é realmente com Angular, mas com métodos Array. A maneira correta de remover um item específico de uma matriz é com Array.splice. Além disso, ao usar ng-repeat, você tem acesso ao especial$index propriedade , que é o índice atual da matriz pela qual você passou.

A solução é realmente bem direta:

Visão:

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

Controlador:

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

Você precisará encontrar o índice do personem sua personsmatriz e, em seguida, usar o splicemétodo da matriz :

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

Eu usaria a biblioteca Underscore.js que possui uma lista de funções úteis.

without

without_.without(array, *values)

Retorna uma cópia da matriz com todas as instâncias dos valores removidos.

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

Exemplo

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

Veja Demo no JSFiddle .

filter

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

// => [2, 4, 6]

Exemplo

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

Veja a demonstração no Fiddle .

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

isso funciona para mim!

Se você tiver alguma função associada à lista, ao fazer a função de emenda, a associação também será excluída. Minha solução:

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

O parâmetro da lista é denominado itens . O parâmetro x.done indica se o item será excluído.

Outras referências: outro exemplo

Espero ajudá-lo. Saudações.

Para a resposta aceita de @ Joseph Silber não está funcionando, porque indexOf retorna -1. Provavelmente porque o Angular adiciona uma hashkey, que é diferente para o meu $ scope.items [0] e o meu item. Tentei resolver isso com a função angular.toJson (), mas não funcionou :(

Ah, eu descobri o motivo ... Eu uso um método chunk para criar duas colunas na minha tabela observando meus $ scope.items. Desculpe!

Você também pode usar isso

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

Angular tem uma função interna chamada arrayRemove, no seu caso, o método pode ser simplesmente:

arrayRemove($scope.persons, person)

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

Para remover um elemento do escopo, use:

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

De indique descrição link aqui