我正在尝试编写一个函数，使我能够在单击按钮时删除项目，但我认为我对该函数感到困惑 - 我是否使用$digest？
HTML＆amp; 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();
};
答案 0 :(得分：529)
要删除项目，您需要将其从数组中删除，并可以将bday项目传递给标记中的删除功能。然后在控制器中查找item的索引并从数组中删除
<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
编辑：如果使用服务器进行实时更新，请使用您使用$resource创建的服务来同时管理阵列更新，以更新服务器
答案 1 :(得分：50)
这是一个正确答案：
<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){
$scope.bdays.splice($index,1);
}
在@ charlietfl的回答中。我认为这是错误的，因为你将$index作为参数传递，但你在控制器中使用了愿望。如果我错了，请纠正我:)
答案 2 :(得分：24)
您可以使用单行选项
<div ng-repeat="key in keywords">
<button ng-click="keywords.splice($index, 1)">
{{key.name}}
</button>
</div>
$index来显示ng-repeat
答案 3 :(得分：22)
使用$index在基本情况下非常有效，@ charlietfl的答案很棒。但有时，$index还不够。
想象一下，你有一个单独的数组，你在两个不同的ng-repeat中呈现。其中一个ng-repeat是针对具有truthy属性的对象进行过滤，另一个针对falsy属性进行过滤。呈现两个不同的滤波阵列，其源自单个原始阵列。 （或者，如果它有助于可视化：也许你有一个人阵列，你想要那个阵列中的女性有一个ng-repeat，另一个是同一个阵列中的男人。）您的目标：使用来自已过滤阵列成员的信息，从原始阵列中可靠地删除。
在每个过滤的数组中，$ index将不是原始数组中项目的索引。它将是过滤子数组中的索引。因此，您将无法在原始people数组中告知此人的索引，您只能知道women或men子数组中的$ index。尝试使用它删除，除了你想要的地方，你将有物品从任何地方消失。怎么办？
如果你很幸运，使用数据模型包含每个对象的唯一标识符，然后使用它而不是$ index，从主数组中找到对象并splice。 （使用下面的示例，但使用该唯一标识符。）但是，如果你没那么幸运？
Angular实际上使用名为$$hashKey的唯一属性来扩充ng重复数组（在主要原始数组中）中的每个项目。您可以在原始数组中搜索要删除的项目的$$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上的哪些键而不是特定于模型的属性名称，还具有使这个函数可以在不同模型和上下文中重用的显着附加优势。提供您的数组引用和项目引用，它应该可以正常工作。
答案 4 :(得分：8)
我通常以这样的方式写作：
<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove = function(index){
$scope.[yourArray].splice(index, 1)
};
希望这会有所帮助 你必须在$ scope和[yourArray]
之间使用一个点（。）答案 5 :(得分：4)
没有控制器的实施。
<!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 ：可选。要添加到数组的新项目
答案 6 :(得分：3)
我不同意您应该在控制器上调用方法。您应该将服务用于任何实际功能，并且您应该为可伸缩性和模块化的任何功能定义指令，以及分配包含对您注入到指令中的服务的调用的单击事件。
例如，在你的HTML上......
<a class="btn" ng-remove-birthday="$index">Delete</a>
然后，创建一个指令......
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();
}
};
}]);
当你像这样正确编写代码时，无需重构代码就可以很容易地编写未来的更改。它组织正确，您通过使用自定义指令绑定正确处理自定义单击事件。
例如，如果你的客户说，“嘿，现在让它让它调用服务器并制作面包，然后弹出一个模态。”您将能够轻松地转到服务本身，而无需添加或更改任何HTML和/或控制器方法代码。如果你只有控制器上的一行，你最终需要使用一项服务，将功能扩展到客户要求的更重的提升。
此外，如果您在其他地方需要另一个“删除”按钮，您现在可以轻松地分配到页面上的任何元素的指令属性（'ng-remove-birthday'）。这使它成为模块化和可重复使用的。在处理Angular 2.0的HEAVY Web组件范例时，这将派上用场。 2.0中没有控制器。 ：）
快乐发展!!!
答案 7 :(得分：1)
这是另一个答案。我希望它会有所帮助。
<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
答案 8 :(得分：0)
如果您的商品中有ID或任何特定字段，则可以使用filter（）。它的行为就像Where（）。
<a class="btn" ng-click="remove(item)">Delete</a>
在控制器中：
$scope.remove = function(item) {
$scope.bdays = $scope.bdays.filter(function (element) {
return element.ID!=item.ID
});
}
答案 9 :(得分：0)
#!/bin/bash
pcap_file=(tcpdump_2019-07-01_000001.pcap tcpdump_2019-06-26_120301.pcap)
macs=( 00:17:88:71:78:72 )
devices=(phillips_1 phillips_2 phillips_3)
for pcf in ${pcap_file[*]}
do
echo "$pcap_file" >&2
/usr/bin/tshark -r "$pcf" -Y "eth.addr eq $macs" -w "$devices.pcap"
done
从控制器（功能可以在同一控制器中，但更喜欢 使其保持服务状态
Pass the id that you want to remove from the array to the given function
答案 10 :(得分：0)
一种简单的内联方法是在删除按钮中添加 bdays.splice($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>