Make multiple collapse using ui.bootstrap and AngularJS

Question

I'm trying to make ui bootstrap collapse. When I'm using static single or double collapse system, its working fine, but for my design I'm using ng-repeat to create collapse, so I have no idea how to use multiple collapse,

I found this code, but it will only work for static code,

var app = angular.module("MyApp", ['ui.bootstrap']);
  app.controller('mainController', function ($scope) {
   $scope.trafficCollapsed = false;
   $scope.urlCollapsed = false;
   $scope.toggleUrl = function () {
   $scope.urlCollapsed = false;
   $scope.trafficCollapsed = !$scope.trafficCollapsed
 };
  $scope.toggleTraffic = function () {
  $scope.trafficCollapsed = false;
  $scope.urlCollapsed = !$scope.urlCollapsed;
 };
});

HTML

<tr>
    <td>/<span class="pull-right" ng-click="toggleUrl()">&#x25BC;</span></td>
    <td>A beautiful title</td>
    <td>A beautiful description</td>
    <td>54,654<span class="pull-right" ng-click="toggleTraffic()">&#x25BC;</span
    </td>
</tr>

I want this design to be collapse.

Devidas Kadam · Accepted Answer · 2016-08-30 06:52:58Z

2

try this, this may help you. here is working fiddle

  <body ng-app="my_app">
  <div ng-controller="CollapseDemoCtrl">
  <ul class="nav">
      <li ng-repeat="(key,val) in menuArray">
      <button class="btn" ng-click="val.isMenuCollapsed = !val.isMenuCollapsed">{{val.button}}
      <span class="caret"></span></button>
      <ul class="dropdown-links" collapse="val.isMenuCollapsed">
        <li ng-repeat="link in val.links" role="menuitem">
          <a href="#">{{link.title}}</a>
        </li>
      </ul>
     </li>
     </ul>
  </div>

Style

    .nav>li {
    display: inline !important;
    position:relative;
}
.dropdown-links{
    position: absolute;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 100%;
    padding: 5px;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

Controller code

var my_app = angular.module('my_app', ['ui.bootstrap']);

my_app.controller('CollapseDemoCtrl', function ($scope) {
$scope.menuArray = [
   {'button':'Button1','isMenuCollapsed':true,'links':[{'title':'link1-1'},{'title':'link1-2'}]},
   {'button':'Button2','isMenuCollapsed':true,'links':[{'title':'link2-1'},{'title':'link2-2'}]}
 ];
  console.log($scope.menuArray);
});

answered Aug 30, 2016 at 6:52

Devidas Kadam

9549 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abhishek Pandey Over a year ago

Thanks for answer, but 1st I need collapse not dropdown angular-ui.github.io/bootstrap/#/collapse, 2nd I need one open at time not all. @DevidasKadam

Devidas Kadam Over a year ago

you can add any markup in collapse, I just added dropdown menu. I will update fiddle and answer to keep one open at a time.

Devidas Kadam Over a year ago

here is the updated fiddle, you can just take an idea from this example and develop your own. finally you are a developer.

Devidas Kadam Over a year ago

did you noticed that I used collapse="val.isMenuCollapsed", you can add any markup in ul or you can use a div having attribute collapse.

Collectives™ on Stack Overflow

Make multiple collapse using ui.bootstrap and AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related