¿Cómo eliminar un elemento de una matriz en el alcance de AngularJS?

Lista de tareas simple, pero con un botón Eliminar en la página de lista para cada elemento:

HTML de plantilla 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 de controlador relevante:

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

Lo intenté $scope.persons.pull(person)y $scope.persons.remove(person).

Aunque la base de datos se eliminó con éxito, no puedo extraer este elemento del alcance y no quiero hacer una llamada al método para el servidor para los datos que el cliente ya tiene, solo quiero eliminar a esta persona del alcance.

¿Algunas ideas?

Su problema no es realmente con Angular, sino con los métodos de matriz. La forma correcta de eliminar un elemento particular de una matriz es con Array.splice. Además, cuando usa ng-repeat, tiene acceso a la $indexpropiedad especial , que es el índice actual de la matriz que pasó.

La solución es bastante sencilla:

Ver:

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

Tendrá que encontrar el índice de personen su personsmatriz, luego use el splicemétodo de la matriz :

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

Me gustaría utilizar el Underscore.js biblioteca que tiene una lista de funciones útiles.

without

without_.without(array, *values)

Devuelve una copia de la matriz con todas las instancias de los valores eliminados.

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

Ejemplo

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

Ver demostración en JSFiddle .

filter

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

// => [2, 4, 6]

Ejemplo

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

Ver demostración en Fiddle .

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

esto funciona para mi!

Si tiene alguna función asociada a la lista, cuando realiza la función de empalme, la asociación también se elimina. Mi solución:

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

El parámetro de la lista se denomina elementos . El parámetro x.done indica si el elemento se eliminará.

Otras referencias: otro ejemplo

Espero ayudarte. Saludos.

Para la respuesta aceptada de @Joseph Silber no funciona, porque indexOf devuelve -1. Esto probablemente se deba a que Angular agrega un hashkey, que es diferente para mi $ scope.items [0] y mi artículo. Traté de resolver esto con la función angular.toJson (), pero no funcionó :(

Ah, descubrí la razón ... Utilizo un método fragmentado para crear dos columnas en mi tabla mirando mis $ scope.items. ¡Lo siento!

También puedes usar esto

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

Angular tiene una función incorporada llamada arrayRemove, en su caso, el método puede ser simplemente:

arrayRemove($scope.persons, person)

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

Para eliminar un elemento del uso del alcance:

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

De ingrese la descripción del enlace aquí