angular.module('myApp', ['ui.bootstrap'])
.controller('MenuController', function($scope) {
$scope.items = [
{
"menuId":1,
"label":"menu1",
"href":"",
"position":1,
"listChilds":[
{
"menuId":3,
"label":"submenu1-1",
"href":"",
"position":1,
"listChilds":null
},
{
"menuId":4,
"label":"submenu1-2",
"href":"",
"position":2,
"listChilds":null
}
]
},
{
"menuId":2,
"label":"menu2",
"href":"",
"position":2,
"listChilds":[
{
"menuId":5,
"label":"submenu2-1",
"href":"",
"position":1,
"listChilds": null
}
]
}
]
});
<!doctype html>
<html ng-app="myApp">
<head>
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<script src="script.js"></script>
</head>
<body>
<script type="text/ng-template" id="menuTree">
<uib-accordion-group>
<uib-accordion-heading ng-if="menu.listChilds">
{{menu.label}}
</uib-accordion-heading>
<div ng-repeat="item in menu.listChilds">{{item.label}}</div>
</uib-accordion-group>
</script>
<div ng-controller="MenuController">
<uib-accordion close-others="true">
<div ng-repeat="menu in items" ng-include="'menuTree'"></div>
</uib-accordion>
</div>
</body>
</html>
對不起我的錯誤:(非常感謝你! – mboudhina