Come rimuovere un elemento da un array nell'ambito di AngularJS?

Elenco di cose da fare semplice, ma con un pulsante Elimina nella pagina elenco per ciascun elemento:

HTML modello pertinente:

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

Metodo del controller pertinente:

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

Ho provato $scope.persons.pull(person)e $scope.persons.remove(person).

Sebbene il database sia stato eliminato correttamente, non riesco a estrarre questo elemento dall'ambito e non voglio effettuare una chiamata di metodo al server per i dati già presenti sul client, desidero solo rimuovere questa persona dall'ambito.

Qualche idea?

Il tuo problema non è proprio con Angular, ma con i metodi Array. Il modo corretto di rimuovere un particolare elemento da un array è con Array.splice. Inoltre, quando si utilizza ng-repeat, si ha accesso alla $indexproprietà speciale , che è l'indice corrente dell'array in cui si è passati.

La soluzione è in realtà piuttosto semplice:

Visualizza:

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

controller:

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

Dovrai trovare l'indice di personnel tuo personsarray, quindi utilizzare il splicemetodo dell'array :

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

Vorrei utilizzare la libreria Underscore.js che ha un elenco di funzioni utili.

without

without_.without(array, *values)

Restituisce una copia dell'array con tutte le istanze dei valori rimossi.

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

Esempio

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

Vedi la demo in JSFiddle .

filter

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

// => [2, 4, 6]

Esempio

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

Vedi la demo in Fiddle .

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

questo funziona per me!

Se hai una funzione associata all'elenco, quando esegui la funzione di giunzione, anche l'associazione viene eliminata. La mia soluzione:

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

Il parametro list è denominato items . Il parametro x.done indica se l'elemento verrà eliminato.

Un altro riferimento: un altro esempio

Spero di aiutarti. Saluti.

Per la risposta accettata di @Joseph Silber non funziona, perché indexOf restituisce -1. Questo probabilmente perché Angular aggiunge un hashkey, che è diverso per il mio $ scope.items [0] e il mio oggetto. Ho provato a risolverlo con la funzione angular.toJson (), ma non ha funzionato :(

Ah, ho scoperto il motivo ... Uso un metodo chunk per creare due colonne nella mia tabella guardando i miei $ scope.it. Scusa!

Puoi anche usare questo

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

Angular ha una funzione integrata chiamata arrayRemove, nel tuo caso il metodo può essere semplicemente:

arrayRemove($scope.persons, person)

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

Per rimuovere un elemento dall'ambito utilizzare:

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

Da inserire qui la descrizione del collegamento