如何使用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(); };
要删除项目，您需要将其从数组中删除，并可以将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告诉人物的索引，你只能从women或men子数组中知道$ 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>
