html - remove - ¿Cómo elimino un elemento u objeto de una matriz usando ng-click?

remove javascript

Question

Estoy tratando de escribir una función que me permite eliminar un elemento cuando se hace clic en el botón, pero creo que me estoy confundiendo con la función: ¿uso $digest ?

HTML y app.js:

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

Answer 1

en caso de que estés dentro de una repetición ng

Podrías usar una opción de liner

    <div ng-repeat="key in keywords"> 
        <button ng-click="keywords.splice($index, 1)">

            {{key.name}}
        </button>
    </div>

$index es usado por angular para mostrar el índice actual de la matriz dentro de una ng-repeat

Answer 2

Aquí hay otra respuesta. Espero que te ayude.

<a class="btn" ng-click="delete(item)">Delete</a>

$scope.delete(item){
 var index = this.list.indexOf(item);
                this.list.splice(index, 1);   
}

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

La fuente completa está aquí
Array.prototype.splice()

Answer 3

El uso de $index funciona perfectamente bien en casos básicos, y la respuesta de @ charlietfl es excelente. Pero a veces, $index no es suficiente.

Imagina que tienes una sola matriz, que estás presentando en dos ng-repeticiones diferentes. Una de esas ng-repeat''s se filtra para los objetos que tienen una propiedad de verdad, y la otra se filtra para una propiedad de falsy. Se presentan dos matrices filtradas diferentes, que se derivan de una matriz original única. (O, si ayuda a visualizar: tal vez tenga una sola variedad de personas, y quiera una repetición ng para las mujeres en esa matriz, y otra para los hombres en esa misma matriz ). Su objetivo: eliminar de manera confiable la matriz original, utilizando información de los miembros de las matrices filtradas.

En cada una de esas matrices filtradas, $ index no será el índice del elemento dentro de la matriz original. Será el índice en la sub-matriz filtrada . Por lo tanto, no podrá decir el índice de la persona en la matriz de people original, solo sabrá el índice $ de la sub-matriz de women o men . Trate de eliminarlo con eso, y tendrá elementos que desaparecerán de todas partes, excepto donde lo desee. ¿Qué hacer?

Si tiene la suerte de estar usando un modelo de datos que incluye un identificador único para cada objeto, entonces use eso en lugar de $ index, para encontrar el objeto y splice de la matriz principal. (Use mi ejemplo a continuación, pero con ese identificador único). ¿Pero si no tiene tanta suerte?

Angular en realidad aumenta cada elemento en una matriz repetida ng (en la matriz principal original) con una propiedad única llamada $$hashKey . Puede buscar una coincidencia en la matriz original en la $$hashKey del elemento que desea eliminar y deshacerse de ella de esa manera.

Tenga en cuenta que $$hashKey es un detalle de implementación, no incluido en la API publicada para ng-repeat. Podrían eliminar el soporte para esa propiedad en cualquier momento. Pero probablemente no. :-)

$scope.deleteFilteredItem = function(hashKey, sourceArray){
  angular.forEach(sourceArray, function(obj, index){
    // sourceArray is a reference to the original array passed to ng-repeat, 
    // rather than the filtered version. 
    // 1. compare the target object''s hashKey to the current member of the iterable:
    if (obj.$$hashKey === hashKey) {
      // remove the matching item from the array
      sourceArray.splice(index, 1);
      // and exit the loop right away
      return;
    };
  });
}

Invocar con:

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

EDITAR: Al usar una función como esta, cuyas teclas en $$hashKey lugar de un nombre de propiedad específico del modelo, también tiene la importante ventaja añadida de hacer que esta función sea reutilizable en diferentes modelos y contextos. Proporcione su referencia de matriz y su referencia de elemento, y debería funcionar.

Answer 4

Esta es una respuesta correcta:

<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

En la respuesta de @charlietfl. Creo que está mal, ya que pasas $index como parámetro pero usas el deseo en el controlador. Corrígeme si me equivoco :)

Answer 5

Implementación sin controlador.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
  var app = angular.module("myShoppingList", []); 
</script>

<div ng-app="myShoppingList"  ng-init="products = [''Milk'',''Bread'',''Cheese'']">
  <ul>
    <li ng-repeat="x in products">{{x}}
      <span ng-click="products.splice($index,1)">×</span>
    </li>
  </ul>
  <input ng-model="addItem">
  <button ng-click="products.push(addItem)">Add</button>
</div>

<p>Click the little x to remove an item from the shopping list.</p>

</body>
</html>

El método splice () agrega / elimina elementos a / desde una matriz.

array.splice(index, howmanyitem(s), item_1, ....., item_n)

índice : Requerido. Un entero que especifica en qué posición agregar / eliminar elementos, use valores negativos para especificar la posición desde el final de la matriz.

howmanyitem (s) : Opcional. El número de elementos a eliminar. Si se establece en 0, no se eliminarán los elementos.

item_1, ..., item_n : Opcional. Los nuevos elementos que se agregarán a la matriz

Answer 6

No estoy de acuerdo con que debas llamar a un método en tu controlador. Debe utilizar un servicio para cualquier funcionalidad real, y debe definir directivas para cualquier funcionalidad de escalabilidad y modularidad, así como asignar un evento de clic que contenga una llamada al servicio que inyecta en su directiva.

Así, por ejemplo, en tu HTML ...

<a class="btn" ng-remove-birthday="$index">Delete</a>

Luego, crea una directiva ...

angular.module(''myApp'').directive(''ngRemoveBirthday'', [''myService'', function(myService){
    return function(scope, element, attrs){
        angular.element(element.bind(''click'', function(){
            myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);  
        };       
    };
}])

Luego en tu servicio ...

angular.module(''myApp'').factory(''myService'', [function(){
    return {
        removeBirthday: function(birthdayIndex, scope){
            scope.bdays.splice(birthdayIndex);
            scope.$apply();
        }
    };
}]);

Cuando escriba su código correctamente de esta manera, será muy fácil escribir los cambios futuros sin tener que reestructurar su código. Está organizada correctamente y está manejando los eventos de clics personalizados correctamente mediante el enlace mediante directivas personalizadas.

Por ejemplo, si su cliente dice, "hey, ahora hagamos que llame al servidor y haga pan, y luego aparezca un modal". Podrá ir fácilmente al servicio sin tener que agregar o cambiar ninguno de los códigos HTML y / o del código del controlador. Si solo tuviera una línea en el controlador, eventualmente necesitaría usar un servicio, para extender la funcionalidad al levantamiento más pesado que solicita el cliente.

Además, si necesita otro botón ''Eliminar'' en otro lugar, ahora tiene un atributo directivo (''ng-remove-birthday'') que puede asignar fácilmente a cualquier elemento de la página. Esto ahora lo hace modular y reutilizable. Esto será útil cuando se trate del paradigma de componentes web de HEAVY de Angular 2.0. No hay controlador en 2.0. :)

¡Feliz desarrollo!

Answer 7

Normalmente escribo en este estilo:

<a class="btn" ng-click="remove($index)">Delete</a>


$scope.remove = function(index){
  $scope.[yourArray].splice(index, 1)
};

Espero que esto te ayude. Tienes que usar un punto (.) Entre $ scope y [yourArray]

Answer 8

Para eliminar el elemento, debe eliminarlo de la matriz y puede pasar el elemento bday a su función de eliminación en el marcado. Luego, en el controlador, busque el índice del elemento y elimínelo de la matriz.

<a class="btn" ng-click="remove(item)">Delete</a>

Luego en el controlador:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

Angular detectará automáticamente el cambio en la matriz de bdays y realizará la actualización de ng-repeat

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDITAR: Si hacer actualizaciones en vivo con el servidor usaría un servicio que usted crea usando $resource para administrar las actualizaciones de la matriz al mismo tiempo que actualiza el servidor

Answer 9

Si tiene ID o algún campo específico en su artículo, puede usar filter (). Su acto como Where ().

<a class="btn" ng-click="remove(item)">Delete</a>

en el controlador:

$scope.remove = function(item) { 
  $scope.bdays = $scope.bdays.filter(function (element) {
                    return element.ID!=item.ID
                });
}

Answer 10

Sobre la base de la respuesta aceptada, esto funcionará con ngRepeat , filter y manejará mejor las exposiciones:

Controlador:

vm.remove = function(item, array) {
  var index = array.indexOf(item);
  if(index>=0)
    array.splice(index, 1);
}

Ver:

ng-click="vm.remove(item,$scope.bdays)"