Twitter Bootstrap Question posted in

Angularjs Accordion – Twitter bootstrap

How to expand accordion panel on button click function?

this is my HTML:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <accordion>
    <accordion-group ng-repeat="group in groups"  is-open="heading1.isOpen">
      <accordion-heading>
        <span ng-click="opened(group, $index)">{{group.title}}</span>
      </accordion-heading>
      {{group.content}}
    </accordion-group>    
    <button class="btn btn-default btn-sm" ng-click="heading1.isOpen = !heading1.isOpen">Toggle 1</button>
  </accordion>  


</div>
  </body>
</html>

example.js:

angular.module('plunker', ['ui.bootstrap']);
function AccordionDemoCtrl($scope) {

  $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Dynamic Group Body - 1",
      open: false
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Dynamic Group Body - 2",
      open: false
    }
  ];
}

Using AngularJS, angular-ui and Twitter Bootstrap, is it possible to make the single accordion expand form ng repeat?
when i create ng-repeat button click is not working.

Tags:

2

Answers


  1. 0

    I’m not sure where you’ve got the heading1 variable from but I think that’s causing the issue.

    Try replacing that with group and changing isOpen to just open as defined in your groups array.

    <accordion>
    <accordion-group ng-repeat="group in groups"  is-open="group.open">
        <accordion-heading>
            <span ng-click="opened(group, $index)">{{$index+1. + " "+ group.title}}</span>
        </accordion-heading>
        {{group.content}}
    </accordion-group>
    <div ng-repeat="group in groups">
        <button class="btn btn-default btn-sm" ng-click="group.open = !group.open">Toggle {{$index+1}}</button>
    </div>
</accordion>
    Login or Signup to reply.
  2. 0
    1. Bind it to to group.open instead of heading1.isOpen (is-open="group.open")
    2. On click just do group.open = true

    Since you have 2 way binding, it will expand the group. You do not need to work with the html, but only with the data and angular/ui.bootstrap does the rest via binding in this case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search