小开

最佳答案

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

<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创建的服务来管理数组更新，同时更新服务器

小开

以下是正确答案:

<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用于过滤具有true属性的对象，另一个用于过滤具有falsy属性的对象。介绍了两个不同的过滤数组，它们源自一个原始数组。(或者，如果这有助于想象:也许你有一个人的数组，你想要一个ng-repeat的女人在数组中，另一个ng-repeat的男人在同一个数组中。)您的目标是:使用经过筛选的数组成员的信息，从原始数组中可靠地删除。

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

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

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上，而不是特定于模型的属性名，还有一个显著的附加优势，即使该函数在不同的模型和上下文中可重用。向它提供数组引用和项引用，它就可以工作了。

小开

我通常这样写:

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




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

希望这对你有所帮助你必须在$scope和[yourArray]

之间使用一个点(.)

小开

基于已接受的答案，这将与ngRepeat， __abc1一起工作，并更好地处理期望:

控制器:

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

观点:

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

小开

以防你在ng-repeat里

你可以选择一条线

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


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

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

小开

我不同意你应该在控制器上调用一个方法。你应该为任何实际的功能使用服务，你应该为任何可伸缩性和模块化的功能定义指令，以及分配一个单击事件，其中包含你注入到指令中的服务调用。

例如，在你的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中没有控制器。：）

发展快乐! !

小开

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

<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 < / p >

小开

没有控制器的实现。

<!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)

< p > 指数: 必需的。一个整数，指定在什么位置添加/删除项，使用负值指定从数组结束的位置

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

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

小开

如果你的项目中有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
});
}

小开

Pass the id that you want to remove from the array to the given function

from controller(函数可以在同一个控制器中，但优先将其保存在服务中)

    function removeInfo(id) {
let item = bdays.filter(function(item) {
return bdays.id=== id;
})[0];
let index = bdays.indexOf(item);
data.device.splice(indexOfTabDetails, 1);
}

小开

一个内联的简单方法是在删除按钮中添加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>

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

以防你在ng-repeat里