通过NG-重复深循环对象 [英] Looping through deep objects in ng-repeat
问题描述
我在角度和我有这样的对象。
I'm in angular and i have a object like this.
var items = [{
title: 'Something',
children: [
{ title: 'Hello World' },
{ title: 'Hello Overflow' },
{ title: 'John Doe', children: [
{ title: 'Amazing title' },
{ title: 'Google it' },
{ title: 'I'm a child', children: [
{ title: 'Another ' },
{ title: 'He\'s my brother' },
{ title: 'She\'s my mother.', children: [
{title: 'You never know if I'm going to have children'}
]}
]}
]}
]
}];
我wan't遍历所有这些，所以我有这样的事情。
I wan't to loop through all of these so i have something like this.
＆NBSP;＆NBSP;＆NBSP;＆NBSP;•东西
• Something
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; •世界您好
• Hello World
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; •你好溢
• Hello Overflow
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; •李四
• John Doe
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;•惊人的标题
• Amazing Title
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;•谷歌吧
• Google it
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;•我是一个孩子
• I'm a child
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;•另一个
• Another
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;•他是我的弟弟。
• He's my brother
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;•她是我的母亲。
• She's my mother
•你永远不知道，如果我要生孩子
• You never know if I'm going to have children
问题是我不知道这个对象将有多深，或什么在它。所以我不能够做手工。我做了以 NG-重复在底部提供的小提琴一个基本的循环，但我想不通我怎么能自动遍历这些和创建嵌套＆LT; UL＆GT; 和＆LT;立GT; 的。
The problem is I wouldn't know how deep this object will go or what's in it. so I wouldn't be able to do it manually. I have done a basic loop with ng-repeat in the fiddle provided at the bottom, but i can't figure out how I can automatically loop through these and create nested <ul>'s and <li>'s.
什么是做到这一点的最佳方式？
What would be the best way to accomplish this?
演示： http://jsfiddle.net/XtgLM/
Demo: http://jsfiddle.net/XtgLM/
推荐答案
在这里你去：
HTML
<div ng-app="app" ng-controller="test">
<ul>
<li nested-item ng-repeat="item in items">{{item.title}}</li>
</ul>
</div>
的JavaScript
var items = [{
title: 'Something',
children: [
{ title: 'Hello World' },
{ title: 'Hello Overflow' },
{ title: 'John Doe', children: [
{ title: 'Amazing title' },
{ title: 'Google it' },
{ title: 'Im a child', children: [
{ title: 'Another ' },
{ title: 'He\'s my brother' },
{ title: 'She\'s my mother.', children: [
{title: 'You never know if im going to have children'}
]}
]}
]}
]
}];
var app = angular.module('app', []);
app.controller('test', function( $scope ) {
$scope.items = items;
});
app.directive('nestedItem', ['$compile', function($compile){
return {
restrict: 'A',
link: function(scope, element){
console.log(element);
if (scope.item.children){
var html = $compile('<ul><li nested-item ng-repeat="item in item.children">{{item.title}}</li></ul>')(scope);
element.append(html);
}
}
};
}]);
我分叉的小提琴：
I forked your fiddle:
其实我必须承认，我喜欢法师道德的做法，但你也可以用自定义指令。关键是要知道，如果你走这条路是你需要拦截的项目级别手动检查当前项目有孩子，如果是这样，$编译节点自己的指令。
Actually I must confess that I like Master Morality's approach but you can also go with a custom directive. The key thing to know if you go that route is that you need to intercept on the item level to manually check if the current item has children, and if so, $compile the directive for the node yourself.
更新
不过，有一件事应该打扰我们在上面的code。 HTML code（该指令内联）的重复是code气味。如果你喜欢，你可以得到真正的时髦，并通过引入通用模板 - code 指令，它没有做任何事情，但提供code解决这个问题在那里它被施加在作为其他指令的模板的节点
However, there is one thing that should bother us in the above code. The duplication of html code (inlined in the directive) is a code smell. If you like, you can get really funky and fix this by introducing a generic template-code directive which doesn't do anything else but providing the code of the node where it is applied on as a template for other directives.
于是我们的解决方案是这样的：
So then our solution would look like this:
HTML
<div ng-app="app" ng-controller="test">
<ul template-code>
<li nested-item ng-repeat="item in items">{{item.title}}</li>
</ul>
</div>
的JavaScript
var items = [{
title: 'Something',
children: [
{ title: 'Hello World' },
{ title: 'Hello Overflow' },
{ title: 'John Doe', children: [
{ title: 'Amazing title' },
{ title: 'Google it' },
{ title: 'Im a child', children: [
{ title: 'Another ' },
{ title: 'He\'s my brother' },
{ title: 'She\'s my mother.', children: [
{title: 'You never know if im going to have children'}
]}
]}
]}
]
}];
var app = angular.module('app', []);
app.controller('test', function( $scope ) {
$scope.items = items;
});
app.directive('templateCode', function(){
return {
restrict: 'A',
controller: function(){},
compile: function(element){
element.removeAttr('template-code');
//ATTENTION: We need to trim() here. Otherwise AngularJS raises an exception
//later when we want to use the templateCode in a $compile function.
//Be aware that we assume a modern browser
//that already ships with a trim function.
//It's easy to secure that with a polyfill.
var templateCode = element.parent().html().trim();
return function(scope, iElement, iAttrs, controller){
controller.templateCode = templateCode;
}
}
}
});
app.directive('nestedItem', ['$compile', function($compile){
return {
restrict: 'A',
require: '^templateCode',
link: function(scope, element, iAttr, controller){
if (scope.item.children){
scope.items = scope.item.children;
var html = $compile(controller.templateCode)(scope);
element.append(html);
}
}
};
}]);
Plunker： http://jsfiddle.net/2rQWf/
这篇关于通过NG-重复深循环对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
