我在 Controller 中声明了以下数据结构:
$scope.tree = {
label:"A",
parent:{
label:"B",
parent:{
label:"C"
}
}
};
我最终想要的是:
<ul>
<li>C
<ul>
<li>B
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
<ul>
我尝试了各种方法来做到这一点,包括外部模板、自定义指令等,但我似乎无法让它工作。
有什么想法吗?
最佳答案
在您在评论中链接到的另一个答案中,我们使用 ng-repeat
指令为模板创建新范围。
也许,您可以通过将 parent
属性包装在数组 [...]
中,用数据模仿此行为:
Controller
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.tree = {
label:"A",
parent:{
label:"B",
parent:{
label:"C"
}
}
};
});
html
<ul ng-repeat="field in [tree]" ng-include="'tree.html'"></ul>
模板
<li>
<div>{{field.label}} {{[field.parent]}}</div>
<ul ng-if="field" ng-repeat="field in [field.parent]" ng-include="'tree.html'"></ul>
</li>
这里是骗子的链接:http://plnkr.co/edit/7shibX0leK1TXVl5kfPc?p=preview
更好的解决方案是创建您自己的 ng-include
并将您的子对象传递给它。
关于angularjs - 如何使用 AngularJS 以相反的顺序导航树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25044253/