Question

我正在尝试在多级列表中实现键盘导航。因此，我尝试给列表中的每个项目一个唯一的ID，如5.2.1（category.item.subitem）。

我已经尝试了很多东西，例如ng-init指向ng-repeat上的变量，另一种方法使用指令，但到目前为止所有问题都是当我更改列表时（例如删除项目）我的自定义索引不会更新！

我在这里做了一个简单的Plnkr：您可以删除项目或子项目，并查看“真实”索引和customindex不相关。

http://plnkr.co/edit/BsRCNAqM7jWkeAJ9rkLN?p=preview

目前我有一个名为customIndex的自定义指令，它将索引作为属性。

<li ng-repeat="subitem in item.subitem" custom-Index="$parent.$index+'.'+$index">

并且在指令中我只需$ eval属性：

.directive('customIndex', function(){
    return{
    restrict:'A',
    link: function(scope, el, attrs){
      scope.myIndex = scope.$eval(attrs.customIndex);
    }
  }
})

但是，就像我尝试的所有其他解决方案一样，这不起作用。

我认为这一定是一个常见的问题。有人对我有什么建议吗？

感谢马库斯

Answer 1

我认为你过于复杂。只尝试这个标记，不需要自定义指令或其他：

 <ul>
    <li ng-repeat="item in data">
      "Real"-index:{{$index}} | myIndex:{{myIndex = $index}}} | Item:{{item.itemName}} <button ng-click="data.splice(data.indexOf(item),1)">Del</button>
    <ul>
      <li ng-repeat="subitem in item.subitem">
        "Real"-index:{{$index}} | myIndex:{{myIndex = $parent.$index+'.'+$index}} | Subitem:{{subitem}} <button ng-click="item.subitem.splice(item.subitem.indexOf(subitem),1); ">Del</button>
      </li>
    </ul>
    </li>
  </ul>

ng-init永远不会为你工作，因为它只在编译指令时执行。使用自定义指令它将永远不会起作用，因为范围项将是您删除的项目，并且您无法访问整个列表。

以下是演示： http://plnkr.co/edit/Nr4cJ2m3JqI8NyLFnQhC?p=preview

Answer 2

所以，在此期间我找到了解决方案。也许不是最好的，但它确实有效。

我可以将所需参数附加到指令属性，并在此属性上设置$ watch以与删除/过滤等引起的任何更改保持同步。例如：

<div item-Index="[$parent.$index,$index,-1,$first, $last]"</div>

并且该指令在链接函数中具有以下函数：

scope.$watch(attrs.itemIndex, function(value) {
            scope.itemIndex = value;
        });

现在每个项目都定义了唯一的索引。

多级键盘导航现在也可以使用，但这超出了这个问题的范围。

如何在角度

2 个答案: