Question

似乎＆＃34;关闭他人＆＃34; UI引导程序中的手风琴不起作用，Plunker中的示例是： here

我尝试了最后一个版本的＆＃34; ui-bootstrap-tpls＆＃34;但它给出的结果更加不正确。是否有任何解决方法可以修复它？

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

提前感谢您的所有反馈。

Answer 1

你的代码创造了几个手风琴，彼此分开。除了有一个循环引用ng-include ...

我试图删除这个问题，这是一个有效的例子：

＆＃13;

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
         }
      ]
   }
]
});

＆＃13;

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

＆＃13;

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

Angularjs：ui bootstrap：accordion＆＃34; close-others＆＃34;不起作用

2 个答案: