Angularjs : ui bootstrap : 手风琴 "close-others" 不工作

Question

UIbootstrap中手风琴的"close-others"好像不行，Plunker中的例子是： here.

我尝试使用 "ui-bootstrap-tpls" 的最新版本，但它给出的结果更加不正确。有什么解决方法可以解决它吗？

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

提前感谢您的所有反馈。

Answer 1

您的代码创建了几个手风琴，彼此分开。此外还有一个循环引用 ng-include...

我已尝试解决此问题，这是一个有效示例：

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="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.4.x" 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>

Answer 2

首先，我要感谢海狸的回复。确实，我最初的需求是有一个递归菜单，所以这是在 beaver 的帮助下我的最终菜单:

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>

Angularjs : ui bootstrap : 手风琴 "close-others" 不工作

Angularjs : ui bootstrap : accordion "close-others" does not works

json

menu

accordion

angularjs

angular-ui-bootstrap