CODEWITHSUNDEEP
angularjsjsonmenuaccordionangular-ui-bootstrap
mboudhina
mboudhina

Reputation: 130

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

It seems that the "close-others" of the accordion in the UI bootstrap does not work, the example in Plunker is: here.

I tried with the last version of "ui-bootstrap-tpls" but it gives a result which is even more incorrect. Is there any workaround to fix it?

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

thanks in advance for all your feedback.

Upvotes: 3

Views: 3697

Answers (2)

mboudhina
mboudhina

Reputation: 130

First I'd like to give my thanks to beaver for his response. Indeed, my original need was to have a recursive menu, so this is my final menu after beaver's help :

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>

Upvotes: 1

beaver
beaver

Reputation: 17647

Your code created several accordion, separated each other. Besides there was a circular reference with ng-include...

I've tried to remove the issue and here is a working example:

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>

Upvotes: 1

Related Questions