webentwicklung-frage-antwort-db.com.de

So entfernen Sie Elemente / Knoten aus dem Array angular.js

Ich versuche, Elemente aus dem Array zu entfernen $scope.items damit Elemente in der Ansicht entfernt werden ng-repeat="item in items"

Nur zu Demonstrationszwecken ist hier ein Code:

for(i=0;i<$scope.items.length;i++){
    if($scope.items[i].name == 'ted'){
      $scope.items.shift();
    }
}

Ich möchte das 1. Element aus der Ansicht entfernen, wenn der Name richtig ist. Es funktioniert gut, aber die Ansicht lädt alle Elemente neu. Weil sich alle Array-Tasten verschoben haben. Dies führt zu unnötigen Verzögerungen in der von mir erstellten mobilen App.

Hat jemand eine Lösung für dieses Problem?

angularjsscopeangularjs-ng-repeat
69
TheNickyYo

Das Löschen von Elementen aus dem Array ist keine Hexerei. Um Elemente aus einem Array zu löschen, müssen Sie splice : $scope.items.splice(index, 1); verwenden. Hier ist ein Beispiel :

[~ # ~] html [~ # ~] 

<!DOCTYPE html>
<html data-ng-app="demo">
  <head>
    <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div data-ng-controller="DemoController">
      <ul>
        <li data-ng-repeat="item in items">
          {{item}}
          <button data-ng-click="removeItem($index)">Remove</button>
        </li>
      </ul>
      <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button>
    </div>
  </body>
</html>

JavaScript 

"use strict";

var demo = angular.module("demo", []);

function DemoController($scope){
  $scope.items = [
    "potatoes",
    "tomatoes",
    "flour",
    "sugar",
    "salt"
  ];

  $scope.addItem = function(item){
    $scope.items.Push(item);
    $scope.newItem = null;
  }

  $scope.removeItem = function(index){
    $scope.items.splice(index, 1);
  }
}
133
madhead

Für alle, die auf diese Frage zurückkommen. Die richtige "Angular Way" zum Entfernen von Elementen aus einem Array ist mit $ filter. Fügen Sie einfach $ filter in Ihren Controller ein und gehen Sie wie folgt vor:

$scope.items = $filter('filter')($scope.items, {name: '!ted'})

Sie müssen keine zusätzlichen Bibliotheken laden oder auf JavaScript-Grundelemente zurückgreifen.

120
bpaul

Sie können einfaches Javascript verwenden - Array.prototype.filter ()

$scope.items = $scope.items.filter(function(item) {
    return item.name !== 'ted';
});
14
Bogdan D

Denn wenn Sie shift() in einem Array ausführen, ändert sich die Länge des Arrays. Also wird die for-Schleife durcheinander gebracht. Sie können eine Schleife von Ende zu Ende durchführen, um dieses Problem zu vermeiden.

Übrigens nehme ich an, dass Sie versuchen, das Element an der Position i zu entfernen, anstatt das erste Element des Arrays. ($scope.items.shift(); in Ihrem Code entfernt das erste Element des Arrays)

for(var i = $scope.items.length - 1; i >= 0; i--){
    if($scope.items[i].name == 'ted'){
        $scope.items.splice(i,1);
    }
}
11
zs2020

Hier ist filter mit nderscore library Vielleicht helfen wir Ihnen, Artikel mit dem Namen "ted" zu entfernen

$scope.items = _.filter($scope.items, function(item) {
    return !(item.name == 'ted');
 });
8
Maxim Shoustin

Nur eine kleine Erweiterung der "eckigen" Lösung. Ich wollte ein Element basierend auf seiner numerischen ID ausschließen. Ansatz funktioniert nicht. Die allgemeinere Lösung, die für {name: 'ted'} oder {id: 42} funktionieren sollte, lautet:

mycollection = $filter('filter')(myCollection, { id: theId }, function (obj, test) { 
                                                             return obj !== test; });
6
Mark Farmiloe

Mir hat die Lösung von @madhead gefallen

Das Problem, das ich hatte, ist jedoch, dass es für eine sortierte Liste nicht funktioniert. Anstatt den Index an die Löschfunktion zu übergeben, habe ich den Artikel übergeben und dann den Index über indexof abgerufen

z.B.:

var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);

Eine aktualisierte Version des Madheads-Beispiels finden Sie unten: Link zum Beispiel

[~ # ~] html [~ # ~] 

<!DOCTYPE html>
<html data-ng-app="demo">
  <head>
    <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div data-ng-controller="DemoController">
      <ul>
        <li data-ng-repeat="item in items|orderBy:'toString()'">
          {{item}}
          <button data-ng-click="removeItem(item)">Remove</button>
        </li>
      </ul>
      <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button>
    </div>
  </body>
</html>

JavaScript 

"use strict";

var demo = angular.module("demo", []);

function DemoController($scope){
  $scope.items = [
    "potatoes",
    "tomatoes",
    "flour",
    "sugar",
    "salt"
  ];

  $scope.addItem = function(item){
    $scope.items.Push(item);
    $scope.newItem = null;
  }

  $scope.removeItem = function(item){
    var index = $scope.items.indexOf(item);
    $scope.items.splice(index, 1);
  }
}
5
TrtlBoy

Meine Lösung für dieses Problem (das keine Leistungsprobleme verursacht hat):

  1. Erweitern Sie das Array-Objekt mit einer Methode zum Entfernen (ich bin sicher, dass Sie es mehr als nur einmal benötigen werden):
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.Push.apply(this, rest);
};

Ich benutze es in all meinen Projekten und die Credits gehen an John Resig John Resigs Site

  1. Mit forEach und einem Basis-Check:
$scope.items.forEach(function(element, index, array){
          if(element.name === 'ted'){
              $scope.items.remove(index);
          }
        });

Am Ende wird der $ digest in Angularjs abgefeuert und meine Benutzeroberfläche wird sofort ohne erkennbare Verzögerung aktualisiert.

3
Fer To

Mit der Funktion indexOf konnte ich meine Sammlung von REST Ressourcen nicht ausschneiden.

Ich musste eine Funktion erstellen, die den Array-Index einer Ressource abruft, die sich in einer Sammlung von Ressourcen befindet:

factory.getResourceIndex = function(resources, resource) {
  var index = -1;
  for (var i = 0; i < resources.length; i++) {
    if (resources[i].id == resource.id) {
      index = i;
    }
  }
  return index;
}

$scope.unassignedTeams.splice(CommonService.getResourceIndex($scope.unassignedTeams, data), 1);
1
Stephane

Wenn Sie der Liste eine Funktion zugeordnet haben, wird die Zuordnung beim Ausführen der Spleißfunktion ebenfalls gelöscht. Meine Lösung:

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

Der Listenparameter heißt artikel. Der param x.done Geben Sie an, ob der Artikel gelöscht werden soll. Hoffe dir zu helfen. Schöne Grüße.

1
Drako

Meine Lösung war ganz einfach

app.controller('TaskController', function($scope) {
 $scope.items = tasks;

    $scope.addTask = function(task) {
        task.created = Date.now();
        $scope.items.Push(task);
        console.log($scope.items);
    };

    $scope.removeItem = function(item) {
        // item is the index value which is obtained using $index in ng-repeat
        $scope.items.splice(item, 1);
    }
});
1
Bastin Robin

Meine Artikel haben eindeutige IDs. Ich lösche eines, indem ich das Modell mit dem Dienst angularjs $filter Filtere:

var myModel = [{id:12345, ...},{},{},...,{}];
...
// working within the item
function doSthWithItem(item){
... 
  myModel = $filter('filter')(myModel, function(value, index) 
    {return value.id !== item.id;}
  );
}

Als ID können Sie auch die $$ -Hash-Key-Eigenschaft Ihrer Modellelemente verwenden: $$hashKey:"object:91"

0
Ruwen