AngularJS Accordion is-open check with ng repeat

javascript angularjs accordion angular-ui-bootstrap

10,632

This is just a slight variation of the other answers. (I'm still unsure about your third requirement, or what you mean by it at least.)

We change this:

...is-open="$parent.isOpen">

Into this (no need to change any data):

...is-open="group.isOpen" ng-click="updateOpenStatus()">

And add the function to the controller, to set a "global" open status. (requirement 2)

$scope.updateOpenStatus = function(){
  $scope.isOpen = $scope.groups.some(function(item){
    return item.isOpen;
  });
}

http://plnkr.co/edit/xMgmLiL65BBimUJ7wbVE?p=preview

10,632

Author by

Mad-D

Updated on June 09, 2022

Comments

Mad-D almost 2 years

I am able to make it work without ng-repeat, However when i have list of elements is-Open is not working.
1. I should be able to open one panel at a time( sometimes it opens all )
2. is-Open should get value true upon panel open
3. If user clicks on list of panel contents after opening the panel, i should be able to fetch value ( similar to is-Open on panel ).

html

<body ng-app="myApp">
        <div class="col-sm-6" ng-controller="Controller">
            <div class="column-nav">
                <uib-accordion close-others="oneAtATime">
                    <uib-accordion-group  ng-repeat="group in groups" ng-scroll="group in groups" is-open="$parent.isOpen">
                        <uib-accordion-heading ng-model="checkTitle">
                            {{group.title}}
                        </uib-accordion-heading>
                            <a>{{group.content}}</a>
                    </uib-accordion-group>
                </uib-accordion>
            </div>
            <div>
                Panel Header Open: {{isOpen}} <br>
                Panel oneAtATime: {{oneAtATime}}
            </div>
        </div>  
    </body>

app.js

myApp.controller('Controller', ['$scope', function($scope) {

    $scope.isOpen = false;
    $scope.oneAtATime = true;

    // Data 
     $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Content - 1"
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Content - 2"
    }
  ];

  //log
  $scope.$watch('isOpen', function(){
        console.log(" watch isOpen:" +$scope.isOpen);
   }, true);

  }]);

Plunker

Thanks for your help and suggestions.