Angularjs: ui bootstrap: el acordeón "close-others" no funciona
json menu (2)
Tu código creó varios acordeones, separados entre sí. Además había una referencia circular con ng-include ...
Intenté eliminar el problema y aquí hay un ejemplo de trabajo:
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>
Parece que los "cercanos-otros" del acordeón en el bootstrap UI no funcionan, el ejemplo en Plunker es: aquí .
Intenté con la última versión de "ui-bootstrap-tpls" pero da un resultado que es aún más incorrecto. ¿Hay alguna solución para solucionarlo?
<div ng-controller="MenuController"> <div ng-repeat="item in items" ng-include="''menuTree''"></div> </div>
gracias de antemano por todos sus comentarios.
Primero, me gustaría dar las gracias a Beaver por su respuesta. De hecho, mi necesidad original era tener un menú recursivo, así que este es mi menú final después de la ayuda de castor:
<script type="text/ng-template" id="menuTree">
<div ng-if="!item.listChilds">
<a ui-sref={{item.href}}>{{item.label}}</a>
</div>
<div ng-if="item.listChilds">
<accordion close-others="true" >
<accordion-group>
<div ng-if="item.listChilds">
<accordion-heading >
{{item.label}}
</accordion-heading>
</div>
<div ng-repeat="item in item.listChilds" ng-include="''menuTree''"/>
</accordion-group>
</accordion>
</div>
</script>