我在这里找到了一个将多级列表输出到Angular的代码http://jsfiddle.net/c4Kp8/
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);
}
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<ul>
<li nested-item ng-repeat="item in items">{{item.title}}</li>
</ul>
</div>
如何在这里实现隐藏和显示列表中的项目?只有Angular而不是jquery。。。。
希望您知道,您可以在没有特殊指令的情况下使嵌套ng重复:-)?
例如,您可以使用angular-ui.bootstrap.collapse或一些自定义解决方案。
Solutions:
Angular UI引导
谷歌搜索自定义解决方案
如果,则使用ng show/ng hide/ng
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngHide
https://docs.angularjs.org/api/ng/directive/ngIf
也许树视图比多次叠瓦重复更合适
http://ngmodules.org/modules/angular.treeview