angularjs - 如何从 angular.js 数组中删除元素/节点-6ren

angularjs - 如何从 angular.js 数组中删除元素/节点

转载作者：行者123 更新时间：2023-12-02 20:16:57

我正在尝试从数组 $scope.items 中删除元素，以便在 View 中删除项目ng-repeat="item in items"

仅出于演示目的，这里有一些代码:

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

如果有名称 ted，我想从 View 中删除第一个元素，对吗？它工作正常，但 View 会重新加载所有元素。因为所有的数组键都已经移位了。这会在我正在创建的移动应用程序中造成不必要的延迟..

谁有办法解决这个问题吗？

最佳答案

从数组中删除项目并不复杂。要从任何数组中删除项目，您需要使用 splice :$scope.items.splice(index, 1);。 Here is an example :

HTML

<!DOCTYPE html>
<html data-ng-app="demo">
  <head>
    <script data-require="angular.js@1.1.5" 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);
  }
}