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

【问题标题】：Angularjs : ui bootstrap : accordion "close-others" does not worksAngularjs：ui bootstrap：手风琴“close-others”不起作用
【发布时间】：2016-04-28 20:47:06
【问题描述】：

似乎UI bootstrap中手风琴的“close-others”不起作用，Plunker中的示例是： here.

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

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

提前感谢您的所有反馈。

【问题讨论】：

标签： angularjs json menu accordion angular-ui-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：