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

我试图编写一个函数,使我可以删除一个项目,当button被点击,但我想我感到困惑的function – 我使用$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(); }; 

9 Solutions collect form web for “如何使用ng-click从数组中删除项目或对象?”

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

 <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的更新

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

编辑:如果做与服务器的实时更新将使用您创build使用$resource的服务来pipe理arrays更新同时更新服务器

这是一个正确的答案:

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

在@ charlietfl的答案。 我认为这是错误的,因为你通过$index作为参数,但你使用的愿望,而不是控制器。 如我错了请纠正我 :)

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

想象一下,你有一个单一的数组,你用两个不同的ng-repeat表示。 其中一个ng-repeat是针对具有真实属性的对象进行过滤,另一个是针对虚假属性进行过滤。 两个不同的过滤数组正在呈现,这是从一个单一的原始数组派生。 (或者,如果它有助于形象化:也许你有一个单一的人,你想要一个女人在这个arrays中,而另一个男人在同一arrays 。)你的目标:可靠地删除原始数组,使用过滤数组成员的信息。

在每个过滤的数组中,$ index不会是原始数组中的项目的索引。 这将是过滤的子数组中的索引。 所以,你不能在原始的people告诉人物的索引,你只能从womenmen子数组中知道$ index。 试着用这个删除,除了你想要的东西之外,你会有物品从任何地方消失。 该怎么办?

如果你足够幸运,使用数据模型包含每个对象的唯一标识符,那么使用它来代替$ index,find对象并将其从主数组中splice出来。 (使用我的例子下面,但具有唯一的标识符。)但如果你不那么幸运?

Angular实际上用一个名为$$hashKey的独特属性来扩充ng重复数组中的每个项目(在主要原始数组中)。 您可以在原始数组中search要删除的项目的$$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)" 

编辑:使用像这样的函数, $$hashKey上的哪些键而不是特定于模型的属性名称,还具有使这个函数在不同模型和上下文中可重用的显着附加优点。 提供它与您的数组引用和您的项目引用,它应该只是工作。

如果你在一个ng重复

你可以使用一个class轮选项

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

$index用于显示ng-repeat内数组的当前索引

build立在接受的答案,这将与ngRepeat ,更好地filter和处理的期望:

控制器:

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

视图:

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

我通常写这样的风格:

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

希望这会有所帮助

我不同意你应该在你的控制器上调用一个方法。 您应该使用服务来实现任何实际的function,并且您应该为可扩展性和模块化的任何function定义指令,以及分配一个包含调用您的指令的服务调用的click事件。

所以,例如,在你的HTML …

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

然后,创build一个指令…

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

然后在你的服务…

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

当你像这样正确地编写你的代码时,你可以很容易地编写未来的变化,而不必重构你的代码。 它的组织正确,你正在通过绑定使用自定义指令正确处理自定义点击事件。

例如,如果你的客户说,“嘿,现在让我们打电话给服务器,做面包,然后popup一个模式。” 您将可以轻松地转到服务本身,而无需添加或更改任何HTML和/或控制器方法代码。 如果你在控制器上只有一行,你最终需要使用一个服务,以便将function扩展到客户要求的更重的提升。

此外,如果您在其他地方需要另一个“删除”button,则您现在有一个指令属性('ng-remove-birthday'),您可以轻松地将其指定给页面上的任何元素。 这现在使它成为模块化和可重用的。 这在处理Angular 2.0的HEAVY Web组件范例时会派上用场。 2.0中没有控制器。 🙂

快乐发展!

这是另一个答案。 我希望这会有所帮助。

 <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, ...) 

完整的源代码在这里
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

没有控制器的实现。

 <!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> 
  • 如何预先通过HTML链接填充短信正文文本
  • 如何隐藏IE8和IE9中的下拉箭头?
  • 如何更改textarea的边框颜色:focus
  • nowrap内嵌块之间的空间
  • 如何在HTML中定义input文本框的大小?
  • HTML脚本标签:类型或语言(或省略两者)?
  • onchange事件是否传播?
  • 如何将parameter passing给在addEventListener中使用的函数?
  • 如何隔离公共CSS样式的div?
  • 如何顶部,在跨越多行的<td>单元格中左alignment文本
  • jQuery:与.focus()相反或如何从input字段中删除焦点