angular bootstrap

by Christine Iammarino

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.min.js"></script>
<div ng-controller="AccordionDemoCtrl">
   <div class="container">

      <label class="checkbox">
         <input type="checkbox" ng-model="oneAtATime" /> Open only one at a time
      </label>

      <accordion close-others="oneAtATime">
         <div class="row">

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
               <div class="row mb-5">
                  <div class="col-xs-12">
                     <accordion-group heading="Static Head 1 (col 1)">This content is straight in the template.</accordion-group>
                  </div>
               </div>
               <div class="row mb-5">
                  <div class="col-xs-12">
                     <accordion-group heading="Static Head 2 (col 1)">This content is straight in the template.</accordion-group>
                  </div>
               </div>
               <div class="row mb-5">
                  <div class="col-xs-12">
                     <accordion-group heading="Static Head 3 (col 1)">This content is straight in the template.</accordion-group>
                  </div>
               </div>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
               <div class="row mb-5">
                  <div class="col-xs-12">
                     <accordion-group heading="Static Head 4 (col 2)">This content is straight in the template.</accordion-group>
                  </div>
               </div>
               <div class="row mb-5">
                  <div class="col-xs-12">
                     <accordion-group heading="Static Head 5 (col 2)">This content is straight in the template.</accordion-group>
                  </div>
               </div>
               <div class="row mb-5">
                  <div class="col-xs-12">
    ...

CSS

.mb-5 {
   margin-bottom: 5px;
}

.mb-10 {
   margin-bottom: 10px;
}

JavaScript

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

function AccordionDemoCtrl($scope) {

   $scope.oneAtATime = false;

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

   $scope.items = ['Item 1', 'Item 2', 'Item 3'];

   $scope.addItem = function() {
      var newItemNo = $scope.items.length + 1;
      $scope.items.push('Item ' + newItemNo);
   };
}