通过导致错误元素成为目标的角度轨道

Question

我昨天遇到了这个问题，并且想知道是否有人经历过类似的事情和/或对于为什么会这样做有解释。

基本上，我有一个ngRepeat块，我一直在使用track by $index（这是出于本问题范围之外的其他原因所必需的）。列表中的每个项目都会在click上触发一个方法，该方法将一个类应用于自身（一些CSS用于退出效果），然后更新它的状态以从列表中删除。

使用选择器添加所涉及的类，以通过与ngClick方法的参数关联的id来定位项目 - 每个项目都将传递其自己的id。 ngRepeat集合由一个方法生成，该方法筛选出具有特定属性的任何集合成员，该属性也将添加到ngClick方法中。

问题是该类正在应用于两个元素 - ngClick＆＃39; ed元素以及集合中的下一个元素。只有ngClick＆＃39; ed元素添加了属性，因此从ngRepeat中删除。

此外，console.log选择显示了一些有趣的结果。注意选择器与结果集中的第0个元素：

这是控制器逻辑的简化示例：

$scope.list = [
    { name : "Joe",   id : 1},
    { name : "Clark", id : 2},
    { name : "Matt",  id : 3},
    { name : "Jimmy", id : 4},
    { name : "Bob",   id : 5}
];

$scope.getItems = function() {
    return _.reject($scope.list, 'clicked');
};

$scope.selectItem = function(id) {
   angular.element('#item-' + id).addClass('selected');
   _.each($scope.list, function(item) { if(item.id === id) { item.clicked = true; } });
};

这是视图中的ngRepeat：

<div ng-repeat="item in getItems() track by $index">
    <h5 ng-bind="item.name" id="item-{{item.id}}" ng-click="selectItem(item.id)"></h5>
</div>

在这里小提琴：http://jsfiddle.net/h8bLm8pL/3/

要解决此问题，我使用每个集合成员的id属性而不是Angular内部$index进行跟踪，例如item in getItems() track by item.id。不过，我还不清楚这是怎么发生的。

Answer 1

我认为它正在发生，因为您正在循环中创建元素的id，但在此之前处理click事件时，它将瞄准前一个元素。试试这个简化的解决方案。

<div ng-repeat="item in getItems()">
    <h5 ng-bind="item.name" ng-click="item.clicked=true" ng-class="{selected: item.clicked}"></h5>
</div>

演示 http://plnkr.co/edit/VD9lXBtr4TyeviWau8l7?p=preview