Angularjs 如何为ng repeat提供id？

我有一个树结构，它需要在三棵树中为每个级别设置不同的样式。因此，我需要某种方法来跟踪项目所处的级别，因此我认为，如果有某种方法可以动态地为

ng repeat

（而不是其中的项目）设置唯一ID，我可以轻松地执行一些数学运算，以提供正确的内联样式

现在我得到了一个使用三个文件的递归树结构；包装器、新级别和分支（与新级别相同）

treeWrapper

和

treeLevel

是使用这些模板的指令

我在

tree branch.html

文件中执行了

ng include

，以使其递归。第一个

ng include

在

tree level.html中只是为了“启动”递归性

因此，我的问题只是如何为树中的每个
ng repeat
设置id？这可能吗

tree wrapper.html
：

<div class="tree-wrapper">
    <tree-level ctrl="ctrl" tree="tree"></tree-level>
</div>

<ul class="tree-list">
    <li class="tree-item" ng-repeat="branch in tree track by $index"
        ng-include="'/app/views/components/tree/tree-branch.html'"></li>
</ul>

<div ng-click="ctrl.toggleBranch(branch)" ng-bind="branch.name"></div>
<ul class="tree-list" ng-if="branch.branches">
    <li class="tree-item" style="padding-left: {{$index * 5}}" ng-repeat="branch in branch.branches" 
        ng-include="'/app/views/components/tree/tree-branch.html'"></li>
</ul>

tree branch.html
：

<div class="tree-wrapper">
    <tree-level ctrl="ctrl" tree="tree"></tree-level>
</div>

<ul class="tree-list">
    <li class="tree-item" ng-repeat="branch in tree track by $index"
        ng-include="'/app/views/components/tree/tree-branch.html'"></li>
</ul>

<div ng-click="ctrl.toggleBranch(branch)" ng-bind="branch.name"></div>
<ul class="tree-list" ng-if="branch.branches">
    <li class="tree-item" style="padding-left: {{$index * 5}}" ng-repeat="branch in branch.branches" 
        ng-include="'/app/views/components/tree/tree-branch.html'"></li>
</ul>





这可以通过使用指令而不是包含来轻松完成

树状分支模板如下所示：

<ul class="branch-level-{{vm.level}}">
   <li ng-repeat="branch in vm.branch.branches">
       <tree-branch level="vm.level + 1" branch="branch"></tree-branch>
   </li>
</ul>

tree level.html
中的kickstart可以简化：

<tree-branch level="0" branch="tree"></tree-branch>



请注意，带有指令的递归将破坏编译器，您必须自己处理它。请参阅此帖子了解如何操作：


/*
*有助于创建递归指令的角度服务。
*@作者马克·拉根迪克
*@license-MIT
*/
angular.module（'RecursionHelper'，[]）.factory（'RecursionHelper'，['$compile'，
函数（$compile）{
返回{
/**
*手动编译元素，修复递归循环。
*@param元素
*@param[link]一个后链接函数，或一个通过pre和post属性注册函数的对象。
*@返回包含链接函数的对象。
*/
编译：函数（元素、链接）{
//规范化链接参数
if（角度函数（链接））{
链接={
帖子：link
};
}
//通过删除内容来中断递归循环
var contents=element.contents（）.remove（）；
var编译内容；
返回{
pre：（link&&link.pre）？link.pre:null，
/**
*编译并重新添加内容
*/
职位：职能（范围、要素）{
//编辑内容
如果（！compiledContents）{
compiledContents=$compile（目录）；
}
//将编译后的内容重新添加到元素中
compiledContents（范围、功能（克隆）{
元素。追加（克隆）；
});
//调用post链接函数（如果有）
if（link&&link.post）{
link.post.apply（null，参数）；
}
}
};
}
};
}
]);
angular.module（'recursionDemo'，['RecursionHelper']））
.controller（“树控制器”，函数（$scope）{
$scope.treeFamily={
姓名：“家长”，
儿童：[{
姓名：“Child1”，
儿童：[{
名称：“1”，
儿童：[]
}, {
姓名:"孙女2",，
儿童：[{
姓名：“孙女1”，
儿童：[]
}]
}, {
姓名:"孙女3",，
儿童：[]
}]
}, {
姓名：“Child2”，
儿童：[]
}]
};
})
.指令（“树”，函数（RecursionHelper）{
返回{
限制：“E”，
作用域：{}，
bindToController：{
族：“=”，
级别：'='
},
控制器：函数（）{}，
controllerAs:'vm'，
模板：“{vm.family.name}}Level={{vm.Level}”+
“
”+
“
”+
'        ' +
“
”+
“
”，
编译：函数（元素）{
返回RecursionHelper.compile（元素、函数（作用域、IEElement、iAttrs、控制器、transcludeFn）{
//在这里定义普通链接函数。
//备选方案：不传递函数，
//您还可以使用传递对象
//“前”和“后”链接功能。
});
}
};
});

我不知道它应该如何与树结构结合，但是，正如在中所说的，您应该将元素与其
ng repeat index
或
ng repeat index+分支名称相关联。无论如何，我真的对你的问题很感兴趣，如果没有人回答这个问题，如果你得到了答案，请将代码粘贴到答案中。@AndreaM16是的，出现的问题是没有值不绑定到循环出的项，而是中继器本身。因此，即使我使用nginit并设置一个id，对于ng中继器，即使它们处于同一级别，它也将是一个不同的id。这真的很烦人：/你说的炸毁编译器是什么意思？如果你将一个指令引用到它自己的模板中，它将进入一个无限循环。哦。。然后，我将研究修复：）如果一切正常，我将返回接受。我为您带来了一个代码片段，您将在问题中发现该代码工作得非常出色！非常感谢。