使用Angular语法删除数组中的对象[重复]
Posted
技术标签:
【中文标题】使用Angular语法删除数组中的对象[重复]【英文标题】：removing an object in an array using Angular syntax [duplicate] 【发布时间】：2015-06-05 02:34:40 【问题描述】：我正在尝试使用 Angular 通过界面管理标签列表。
我的范围内有一个服务器拉取的标签列表。
app.js
$scope.Tags = [id:1, name:'tag1', desc:'desc1', id:2, name:'tag2', desc:'desc2', id:3, name:'tag3', desc:'desc1', ...];
我使用这段 html 代码显示列表：
tags.html
<ul>
<li ng-repeat="T in Tags"> T.name </li>
</ul>
当我单击 <li> 元素时，我希望 angular 删除关联的 Tag 对象。
然后我增强我的代码如下：
tags.html
<ul>
<li
ng-repeat="T in Tags"
ng-click="removeTag($event);"
> T.name </li>
</ul>
app.js
$scope.removeTag = function (event)
// the following code is just used to remove the Tag from the list
// using underscore.js
$scope.Tags = _($scope.Tags).filter(function (t)
return t.name !== event.srcElement.innerHTML
);
这是可行的，但我希望有一种更轻松的方式来执行相同的任务。而且我对 Angular 的经验仍然有限。
这样的东西会很棒：
<ul>
<li ng-repeat="T in Tags" ng-click="Tags - T"> T.name </li>
<!-- this is more like a dream tho -->
</ul>
【问题讨论】：
【参考方案1】：没有“Angular”方法可以从数组中删除项目。您只需要使用常规的旧 javascript 方式即可。您还可以进行一些简单的更改以使代码更清晰。首先，将您的标记更改为：
<ul>
<!-- Pass the Tag, not the event -->
<li ng-repeat='T in Tags' ng-click='removeTag(T)'>
T.name
</li>
</ul>
然后remove可以变成：
$scope.removeTag = function(tag)
var index = $scope.Tags.indexOf(tag);
if(index > -1) $scope.Tags.splice(index, 1);
【讨论】：
我认为你的意思是使用splice，而不是slice【参考方案2】：
尝试根据数组中的索引（$index）拼接数组，像这样：
<ul>
<li ng-repeat="T in Tags" ng-click="Tags.splice($index, 1)">T.name</li>
</ul>
【讨论】：
这出乎意料地有效。这样做有什么缺点吗？ @발렌텐 - 唯一的缺点是，除了简单地从数组中删除元素（例如调用服务器端 API）之外，您还有其他逻辑要运行。 @JustinNiessner 我没有，那么我想使用这种语法没有任何问题。我喜欢它 @발렌텐 - 如果您允许对数据进行排序/过滤，您也可能会遇到问题。 如果您将拼接移动到控制器中的函数中，您的 HTML 可能看起来更干净（只是ng-click="removeTag($index)"）......但无论哪种方式都可以。如果您喜欢$index，请务必查看$first 和$last，因为它们也可以派上用场（不一定适用于您当前的用例，但很高兴知道）。【参考方案3】：
点击事件处理程序应该是这样的：
<ul>
<li
ng-repeat="T in Tags"
ng-click="removeTag(T);"
> T.name </li>
</ul>
在您的控制器中：
$scope.removeTag = function (t)
$scope.Tags.splice($scope.Tags.indexOf(t),1);
不是传递事件对象，而是传递对象本身。
演示：
angular.module("app",[])
.controller("MainCtrl", function($scope)
$scope.Tags = [id:1, name:'tag1', desc:'desc1', id:2, name:'tag2', desc:'desc2', id:3, name:'tag3', desc:'desc1'];
$scope.removeTag = function (t)
$scope.Tags.splice($scope.Tags.indexOf(t),1);
);<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
<ul>
<li
ng-repeat="T in Tags"
ng-click="removeTag(T);"
> T.name </li>
</ul>
</body>
</html>【讨论】：
以上是关于使用Angular语法删除数组中的对象[重复]的主要内容，如果未能解决你的问题，请参考以下文章