我正在尝试在多级列表中实现键盘导航。 因此,我尝试给列表中的每个项目一个唯一的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);
}
}
})
但是,就像我尝试的所有其他解决方案一样,这不起作用。
我认为这一定是一个常见的问题。 有人对我有什么建议吗?
感谢 马库斯
答案 0 :(得分:3)
我认为你过于复杂。只尝试这个标记,不需要自定义指令或其他:
<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永远不会为你工作,因为它只在编译指令时执行。使用自定义指令它将永远不会起作用,因为范围项将是您删除的项目,并且您无法访问整个列表。
答案 1 :(得分:0)
所以,在此期间我找到了解决方案。也许不是最好的,但它确实有效。
我可以将所需参数附加到指令属性,并在此属性上设置$ watch以与删除/过滤等引起的任何更改保持同步。 例如:
<div item-Index="[$parent.$index,$index,-1,$first, $last]"</div>
并且该指令在链接函数中具有以下函数:
scope.$watch(attrs.itemIndex, function(value) {
scope.itemIndex = value;
});
现在每个项目都定义了唯一的索引。
多级键盘导航现在也可以使用,但这超出了这个问题的范围。