在 Angular 中使用 ng-repeat 进行递归
[英] Recursion with ng-repeat in Angular
本文介绍了在 Angular 中使用 ng-repeat 进行递归的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在基于付费网站主题的 Angular 应用程序中，我的侧边菜单中的项目具有以下数据结构.数据结构是我自己的，菜单是从原始菜单视图派生出来的，ul 中的所有项目都经过硬编码.
在 SidebarController.js 中:
$scope.menuItems = [{isNavItem":真，"href": "#/dashboard.html",文本":仪表板"},{isNavItem":真，"href": "javascript:;","text": "AngularJS 特性",子项目":[{"href": "#/ui_bootstrap.html","text": " UI 引导程序"},...]},{isNavItem":真，"href": "javascript:;","text": "jQuery 插件",子项目":[{"href": "#/form-tools","text": "表单工具"},{isNavItem":真，"href": "javascript:;","text": "数据表",子项目":[{"href": "#/datatables/managed.html","text": "托管数据表"},...]}]}];
然后我将以下部分视图绑定到该模型，如下所示:
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}"><li ng-repeat="item in menuItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}"><a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}"><span class="title">{{item.text}}</span></a><ul ng-if="item.subItems && item.subItems.length > 0" class="sub-menu"><li ng-repeat="item.subItems中的item" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}"><a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}"><span class="title">{{item.text}}</span></a>
注意 视图绑定中可能有 $scope 属性，您在模型中看不到，反之亦然，但那是因为我已经编辑了它们简洁.现在因为第二层 li 也不包含它自己的 subItems 的条件 ul，Datatable 下的子项 菜单项不会被渲染.
我怎样才能创建一个视图或模板，或两者都递归地绑定到模型，以便呈现所有子项的所有子项?这通常最多只有四个级别.
解决方案
你可以简单地使用 ng-include 来创建一个部分并递归调用它:部分应该是这样的:
<li ng-repeat="item.subItems 中的项目"><a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}"><span class="title">{{item.text}}</span></a><div ng-switch on="item.subItems.length > 0"><div ng-switch-when="true"><div ng-init="subItems = item.subItems;"ng-include="'partialSubItems.html'"></div>
还有你的 html:
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}"><li ng-repeat="item in menuItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}"><a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}"><span class="title">{{item.text}}</span></a><ul ng-if="item.subItems && item.subItems.length > 0" class="sub-menu"><li ng-repeat="item.subItems中的item" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}"><a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}"><span class="title">{{item.text}}</span></a><div ng-switch on="item.subItems.length > 0"><div ng-switch-when="true"><div ng-init="subItems = item.subItems;"ng-include="'newpartial.html'"></div>
这是工作的plunkerhttp://plnkr.co/edit/9HJZzV4cgacK92xxQOr0?p=preview
I have the following data structure for items in my sidemenu, in an Angular app based on a paid-for web site theme. The data structure is my own, and the menu is derived from the original menu view with all items in the ul hard coded.
In SidebarController.js:
$scope.menuItems = [
{
"isNavItem": true,
"href": "#/dashboard.html",
"text": "Dashboard"
},
{
"isNavItem": true,
"href": "javascript:;",
"text": "AngularJS Features",
"subItems": [
{
"href": "#/ui_bootstrap.html",
"text": " UI Bootstrap"
},
...
]
},
{
"isNavItem": true,
"href": "javascript:;",
"text": "jQuery Plugins",
"subItems": [
{
"href": "#/form-tools",
"text": " Form Tools"
},
{
"isNavItem": true,
"href": "javascript:;",
"text": " Datatables",
"subItems": [
{
"href": "#/datatables/managed.html",
"text": " Managed Datatables"
},
...
]
}
]
}
];
Then I have the following partial view bound to that model as follows:
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}">
<li ng-repeat="item in menuItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}">
<a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}">
<span class="title">{{item.text}}</span>
</a>
<ul ng-if="item.subItems && item.subItems.length > 0" class="sub-menu">
<li ng-repeat="item in item.subItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}">
<a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}">
<span class="title">{{item.text}}</span>
</a>
</li>
</ul>
</li>
</ul>
NOTE There may be $scope properties in the view bindings you don't see in the model, or vice versa, but that is because I have edited them for brevity.
Now because the second level li doesn't also contain a conditional ul for its own subItems, the sub-items under the Datatable menu item don't get rendered.
How can I create a view or template, or both, that will bind recursively to the model, so that all sub-items of all sub-items are rendered? This will normally only be up to four levels.
解决方案
You can simply use ng-include to make a partial and call it recursively:
Partial should be something like this:
<ul>
<li ng-repeat="item in item.subItems">
<a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}">
<span class="title">{{item.text}}</span>
</a>
<div ng-switch on="item.subItems.length > 0">
<div ng-switch-when="true">
<div ng-init="subItems = item.subItems;" ng-include="'partialSubItems.html'"></div>
</div>
</div>
</li>
</ul>
And your html:
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}">
<li ng-repeat="item in menuItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}">
<a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}">
<span class="title">{{item.text}}</span>
</a>
<ul ng-if="item.subItems && item.subItems.length > 0" class="sub-menu">
<li ng-repeat="item in item.subItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}">
<a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems && item.subItems.length > 0}">
<span class="title">{{item.text}}</span>
</a>
<div ng-switch on="item.subItems.length > 0">
<div ng-switch-when="true">
<div ng-init="subItems = item.subItems;" ng-include="'newpartial.html'"></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
Here is the working plunker
http://plnkr.co/edit/9HJZzV4cgacK92xxQOr0?p=preview
这篇关于在 Angular 中使用 ng-repeat 进行递归的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
