Angularjs：ui bootstrap：手风琴“close-others”不起作用

似乎UI引导程序中手风琴的“close-others”不起作用，Plunker中的示例是： here。Angularjs：ui bootstrap：手风琴“close-others”不起作用

我试着用最后一个版本的“ui-bootstrap-tpls”，但它给出的结果更加不正确。有没有解决办法的解决方法？

<div ng-controller="MenuController"> <div ng-repeat="item in items" ng-include="'menuTree'"></div> </div>

在此先感谢您的所有反馈意见。

2016-01-22 mboudhina

您的代码创建了几个手风琴，彼此分开。除了有与NG-包括循环引用...

我试图删除的问题，这里是一个工作示例：

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>

来源

2016-01-22 10:25:27 beaver

对不起我的错误:(非常感谢你！ – mboudhina

首先我会感谢海狸对他的回应。事实上，我原来的需求是有一个递归菜单，所以这是我最后的菜单海狸的帮助后：

here

<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>

来源

2016-01-26 07:54:42 mboudhina

Angularjs：ui bootstrap：手风琴“close-others”不起作用

回答

相关问题