javascript - 通过导致错误的元素成为目标来进行 Angular 跟踪

Question

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

本质上，我有一个 ngRepeat block ，我一直在其中使用 track by $index (由于本问题范围之外的其他原因，这是必要的)。列表中的每个项目都会在单击时触发一个方法，该方法会将一个类应用于自身(一些用于退出效果的 CSS)，然后更新其状态以从列表中删除。

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

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

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

这是 Controller 逻辑的简化示例:

$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; } });
};

这是 View 中的 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() 通过 item.id 跟踪。不过，我不清楚这是如何发生的。

Answer 1

我认为发生这种情况是因为您正在循环中创建元素的 id，但在此之前，当处理单击事件时，它会针对前一个元素。尝试这个简化的解决方案。

<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