javascript - 这里如何实现列表中项目的隐藏和显示？

Question

我在这里找到了一个将多级列表输出到 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...

Answer 1

希望你知道，你可以在没有特殊指令的情况下进行嵌套 ng-repeat :-) ?

您可以使用例如 angular-ui.bootstrap.collapse 或一些自定义解决方案。

Solutions:

Angular UI Bootrap

Googled custom solution