How to use Bootstrap panels with AngularJS ng-repeat

Question

I used the tutorial on w3schools.com to create my panel, but when I added, angular, my code stopped working.

Here's my code:

<div class="panel-group" id="accordion">
  <div ng-repeat="x in numOfMaps">
    <div class="panel {{x.count}}Details">
      <div class="panel-heading">
        <li class="m2Details m3Details panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}buildingToggle">
            Building<span class="caret"></span>
          </a>
        </li>
      </div>
      <div id="{{x.count}}buildingToggle" class="panel-collapse collapse {{x.buildingOpen}}">
        <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}} panel-body">
          <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
            <img src="{{y.icon}}" width="15px" height="15px">{{y.name}}
          </a>
        </li>
      </div>
    </div>
    <div class="panel {{x.count}}Details">
      <div class="panel-heading">
        <li class="m2Details m3Details panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}offsiteToggle">
            Offsite<span class="caret"></span>
          </a>
        </li>
      </div>
      <div id="{{x.count}}offsiteToggle" class="panel-collapse collapse {{x.offsiteOpen}}">
        <li ng-repeat="z in this[x.count + 'InfoOffsite']" class="{{z.linkclass}} panel-body">
          <a href="{{z.link}}" ng-click="clickLinks(z.initialOut,z.initialIn,z.backIn,z.backOut,z.name)">
            <img src="{{z.icon}}" width="15px" height="15px">{{z.name}}
          </a>
        </li>
      </div>
    </div>
  </div>

I've looked at these StackOverflow questions:

Perhaps there are others, but I haven't found anything that works for me. The code works perfectly otherwise. I got the panel to display the way I want, and the Angular is filling in fine.

My Problem is the panels don't close when another one opens.

I am using UI Bootstrap, so a solution that uses that is acceptable.

UPDATE: With an answer below I have something sort of working, this seems to be what I am going for, however there are a couple of kinks that I don't understand how to work out:

<accordion close-others="true">

  <accordion-group ng-repeat="x in numOfMaps" class="{{x.count}}Details" 
                   heading="Building" data-target="#{{x.count}}BuildingToggle" 
                   is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
    <ul id="{{x.count}}BuildingToggle" class="accordion-body">
      <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}}">
        <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
          <img src="{{y.icon}}" width="15px" height="15px">
          {{y.name}}
        </a>
      </li>
    </ul>
  </accordion-group>

As soon as I add the js script that makes the status function:

$scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
};

They all start open for a second then force close and wont reopen. How do I bypass this? I need a way to make each accordion unique because I think they are working off of each other because there is no data-target to tell which panel to open and close or something I don't know. Anyone know? I need that JS for the functionality because I need one accordion to stay open and be disabled, while the others can open and close.

I very much do not appreciate my question being edited. There is no reason to edit my code for *your* and *most* others readability when it is *my* code. I've never even seen html properties indented like that and think it is ugly and there is *really* no reason to edit my grammar I would just delete this post because it is no longer mine own but I don't want to hinder the future of my posts. So thanks for wasting your time editing a post you couldn't properly answer, I guess at least that made you feel better. — Christine268, May 18 '15 at 18:49

score 2 · Answer 1 · answered May 15 '15 at 21:10

You can use the Angular-UI Accordion and set close-others="true".

Then wire up whatever logic you want in each repeat block.

Here's a demo in StackSnippets

var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
app.controller('ui.bootstrap.ctrl', function ($scope) {

  $scope.numOfMaps = [ 
    {count: 1, text: "Text 1", header: "Header 1"},
    {count: 2, text: "Text 3", header: "Header 2"},
    {count: 2, text: "Text 3", header: "Header 3"}
  ];

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">


    <accordion close-others="true">
      
      <accordion-group ng-repeat="x in numOfMaps" 
                       heading="{{x.header}}" 
                       is-open="status.isFirstOpen" 
                       is-disabled="status.isFirstDisabled">
        {{x.text}}
      </accordion-group>
      
    </accordion>

  </div>
</div>

Problem is once I added the script that actually makes the status function, it wigs out. Because now it there is more than one accordion and they seem to all make each other function, So when the page loads, they all are open for a second, but then close and can't be reopened. The nice thing about panels and even a different accordion thing I was using before the panel idea, is that there is a data-target so that it knows which "header" is toggling which "content". This doesn't appear to have that functionality. But I tried to add it. Maybe I am doing it wrong? I'll edit my question with it. — Christine268, May 18 '15 at 14:30

How to use Bootstrap panels with AngularJS ng-repeat

1 Answers1

Here's a demo in StackSnippets