我如何删除一个项目或对象从数组使用ng-click?

我试图写一个函数，使我能够删除一个项目时，按钮被点击，但我认为我与函数混淆-我使用$digest吗?

HTML & 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();
};

当前回答

要删除项，您需要从数组中删除它，并可以将bday项传递给标记中的删除函数。然后在控制器中查找项目的索引并从数组中删除

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

然后在控制器中:

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

Angular会自动检测bdays数组的变化，并更新ng-repeat

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

编辑:如果使用服务器进行实时更新，将使用您使用$resource创建的服务来管理数组更新，同时更新服务器

2013-03-16 20:34:17

其他回答

我通常这样写:

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


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

希望这能有所帮助你必须在$scope和[yourArray]之间使用一个点(.)

2015-01-13 14:37:49

以防你在ng-repeat里

你可以选择一条线

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

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

$index被angular用来显示ng-repeat中数组的当前索引

2015-09-22 15:08:39

一个内联的简单方法就是添加bdays。在删除按钮中拼接($index, 1)。

  <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="bdays.splice($index, 1)">Delete</a>
    </form>
  </li>
</ul>

2021-03-15 14:01:56

没有控制器的实现。

<!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 track by $index">{{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>

splice()方法的作用是:向数组中添加/从数组中删除项。

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

指数: 必需的。指定在什么位置添加/删除项的整数。使用负值指定从数组末尾开始的位置。

howmanyitem (s):可选的。要删除的项的数目。如果设置为0，则不会删除任何项。

item_1,……， item_n:可选。要添加到数组中的新项

2017-09-11 16:13:27

使用$index在基本情况下工作得非常好，@charlietfl的答案很棒。但有时，$index是不够的。

Imagine you have a single array, which you're presenting in two different ng-repeat's. One of those ng-repeat's is filtered for objects that have a truthy property, and the other is filtered for a falsy property. Two different filtered arrays are being presented, which derive from a single original array. (Or, if it helps to visualize: perhaps you have a single array of people, and you want one ng-repeat for the women in that array, and another for the men in that same array.) Your goal: delete reliably from the original array, using information from the members of the filtered arrays.

在每个过滤后的数组中，$index不会是原始数组中该项的索引。它将是筛选子数组的下标。你无法在原始的people数组中知道person的索引，你只能从women或men子数组中知道$index。尝试使用它删除，你会有项目从任何地方消失，除了你想要的地方。怎么办呢?

如果您足够幸运，使用的数据模型包含每个对象的唯一标识符，那么使用该标识符而不是$index来查找对象并将其从主数组中拼接出来。(请使用下面的例子，但是使用唯一标识符。)但如果你没那么幸运呢?

Angular实际上用一个名为$$hashKey的唯一属性来扩充ng-repeat数组(主数组中的原始数组)中的每一项。您可以在原始数组中搜索与要删除的项的$$hashKey相匹配的项，并以这种方式删除它。

注意$$hashKey是一个实现细节，不包含在ng-repeat的已发布API中。他们可以在任何时候删除对该属性的支持。但可能不会。: -)

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

调用:

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

EDIT:使用这样的函数(键在$$hashKey上，而不是特定于模型的属性名上)还有一个显著的附加优势，即使该函数可以跨不同的模型和上下文重用。向它提供数组引用和项引用，它就可以工作了。

2013-12-11 05:43:16

我如何删除一个项目或对象从数组使用ng-click?

推荐文章

最新文章

标签