如何从 angular.js 数组中删除元素/节点 [英] How to remove elements/nodes from angular.js array

查看：15 发布时间：2021/11/9 23:48:15 angularjs scope angularjs-ng-repeat

本文介绍了如何从 angular.js 数组中删除元素/节点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这里有一些代码只是为了演示目的:

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

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

有人有解决这个问题的方法吗?

解决方案

从数组中删除项目没有火箭科学.要从任何数组中删除项目，您需要使用 splice: $scope.items.splice(index, 1);.这是一个例子:

HTML

<html data-ng-app="demo"><头><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><身体><div data-ng-controller="DemoController"><ul><li data-ng-repeat="项目中的项目">{{物品}}<button data-ng-click="removeItem($index)">Remove</button><input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">添加</button>

</html>

JavaScript

"使用严格";var demo = angular.module("demo", []);功能演示控制器($scope){$scope.items = [土豆"，番茄"，面粉"，糖"，盐"];$scope.addItem = function(item){$scope.items.push(item);$scope.newItem = null;}$scope.removeItem = 函数(索引){$scope.items.splice(index, 1);}}

I am trying to remove elements from the array $scope.items so that items are removed in the view ng-repeat="item in items"

Just for demonstrative purposes here is some code:

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

I want to remove the 1st element from the view if there is the name ted right? It works fine, but the view reloads all the elements. Because all the array keys have shifted. This is creating unnecessary lag in the mobile app I am creating..

Anyone have an solutions to this problem?

解决方案

There is no rocket science in deleting items from array. To delete items from any array you need to use 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);
  }
}

这篇关于如何从 angular.js 数组中删除元素/节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何从 angular.js 数组中删除元素/节点 [英] How to remove elements/nodes from angular.js array

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何从 angular.js 数组中删除元素/节点 [英] How to remove elements/nodes from angular.js array

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭