Question

我正在尝试使用 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>

Answer 1

尝试根据数组中的索引（$index）拼接数组，如下所示：

<ul>
  <li ng-repeat="T in Tags" ng-click="Tags.splice($index, 1)">{{T.name}}</li>
</ul>

Answer 2

click事件处理程序应如下所示：

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

Answer 3

没有＆＃34; Angular＆＃34;从数组中删除项目的方法。您只需要使用常规的旧JavaScript方式。您还可以进行一些简单的更改，以使代码更清晰。首先，将您的标记更改为：

<ul>
    <!-- Pass the Tag, not the event -->
    <li ng-repeat='T in Tags' ng-click='removeTag(T)'>
        {{ T.name }}
    </li>
</ul>

然后删除可以成为：

$scope.removeTag = function(tag) {
  var index = $scope.Tags.indexOf(tag);
  if(index > -1) $scope.Tags.splice(index, 1);
}

使用Angular语法删除数组中的对象

3 个答案: