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">

      <div class="row">
         <div class="col-xs-12">
            <label class="checkbox">
               <input type="checkbox" ng-model="oneAtATime" />Open only one at a time</label>
         </div>
      </div>
      <!--/row-->

      <div class="row">
         <div class="col-xs-12">
            <div class="flex-container" close-others="oneAtATime">

               <div class="flex-item">
                  <accordion>
                     <accordion-group heading="Dynamic Items">
                        <p>You can interact and the panel will grow!</p>
                        <button class="btn btn-small" ng-click="addItem()">Add Item</button>
                        <div ng-repeat="item in items">{{item}}</div>
                     </accordion-group>
                  </accordion>
               </div>

               <accordion class="flex-item" ng-repeat="group in groups">
                  <accordion-group heading="{{group.title}}">{{group.content}}</accordion-group>
               </accordion>

            </div>
         </div>
         <!--/flex-container-->
      </div>
      <!--/row-->
   </div>
   <!--/container-->
</div>
<!--/controller-->

CSS

.flex-container {
   display: flex;
   justify-content: space-around;
   /* align-items:stretch; */
   flex-flow: row wrap;
   /* 
	"flex-flow" combines 'flex-direction' and 'flex-wrap'
	Those properties define the container's x and y axes
		flex-direction: row (default) | row-reverse | column | column-reverse |;
   	flex-wrap: nowrap (default) | wrap | wrap-reverse |; 
			Combined into shorthand like above
			flex-flow: <flex-direction> || <flex-wrap>;
	*/
   background-color: orange;
}

.flex-item {
   padding: 5px;
   width: 30%;
}

@media(max-width:480px) {
   .flex-item {
      width: 90%;
   }
}

JavaScript

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

function AccordionDemoCtrl($scope) {

   $scope.oneAtATime = false;

   $scope.groups = [{
      title: "Dynamic 1",
      content: "Dynamic Body 1"
   }, {
      title: "Dynamic  2",
      content: "Dynamic Body 2"
   }, {
      title: "Dynamic 3",
      content: "Dynamic Body 3"
   }, {
      title: "Dynamic 4",
      content: "Dynamic Body 4"
   }, {
      title: "Dynamic 5",
      content: "Dynamic Body 5"
   }, {
      title: "Dynamic 6",
      content: "Dynamic Body 6"
   }, {
      title: "Dynamic 7",
      content: "Dynamic Body 7"
   }, {
      title: "Dynamic 8",
      content: "Dynamic Body 8"
   }, {
      title: "Group 1",
      content: "Group Body 1"
   }, {
      title: "Group 2",
      content: "Group Body 2"
   }, {
      title: " Group 3",
      content: "Group Body 3"
   }];

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

}