Question

我的HTML：

<section  ng-repeat="Rule in Data track by $index" ng-if="!Rule.is_deleted">
    {{$index}}
    {{ Rule.title }}<a ng-click="removeElem($index)"></a> 
</section>

和控制器：

$scope.removeElem = function (elemIndex) {
     $scope.Data[elemIndex].is_deleted = true;              
}

$scope.addElem = function(obj) {
    $scope.Data.push(obj);
}

有一个向$scope.Data数组添加/删除对象的功能。我们假设$ scope.Data中有两个项目;我正在删除一个并添加一个新的。因此，这些项目仍然是两个。问题是 $ index将新创建的第二项与值2相关联而不是值1 ，如我所料（ng-if从DOM中删除项目，不是吗？）。为什么？如果删除项目，我怎么能要求$ index减少它的价值呢？

Answer 1

您可能希望filter而不是ng-if中使用ng-repeat。

<section ng-repeat="Rule in (Data | filter: {is_deleted: false}) track by $index">
    {{$index}}
    {{ Rule.title }}<a ng-click="removeElem($index)"></a> 
</section>

显示差异：https://jsfiddle.net/u6nqrq5o/

Answer 2

不要使用$ index，只需将对象传递给函数即可。此外，这是一个更好的过滤器用例，而不是使用ng-if隐藏/显示行

<强> HTML

<section ng-repeat="Rule in Data | filter: {is_deleted: false}">
  {{ Rule.title }}
  <a ng-click="removeElem(Rule)">Remove</a>
</section>

<强>控制器

$scope.removeElem = function(rule) {
  rule.is_deleted = true;
};

Answer 3

应该避免使用$ index。而不是使用$ index，更喜欢传递实际的对象。例如。纳克单击=＆＃34; removeElem（规则）＆＃34;

当ng-if删除元素时，$ index不会减小其值

3 个答案: