CODEWITHSUNDEEP
javascriptangularjsjsonangular-ui-bootstrap
Frederick M. Rogers
Frederick M. Rogers

Reputation: 921

Angularjs - UI Boostrap: Accordion Open and close all

i have written some code to open and close all tabs of an accordion respectively use a separate 'open' and 'close' button. How ever it requires me to dynamically add a key value pair(a Boolean value) to my json data.

What is the best practice in this situation? should i add the Boolean value as a static json element or is it OK to dynamically add values when their sole purpose is for visual structure and not relevant to actual object data.

HTML/Angular directives

<div id="app" ng-app="demoApp">
  <div id="controller" ng-controller="demoAppCtrl">    
    <uib-accordion close-others="false">    
      <div class="btn-group form-group">
        <button type="button" class="btn btn-warning" ng-click="toggle(true)">Open</button>
        <button type="button" class="btn btn-warning" ng-click="toggle(false)">Close</button>
      </div>      
      <uib-accordion-group is-open="hero.state" ng-click="setOpened(false)" ng-repeat="hero in heroes">
        <uib-accordion-heading>
          {{hero.name}}
        </uib-accordion-heading>
        {{hero.bio}}
      </uib-accordion-group>    
    </uib-accordion>    
  </div>  
</div>

Javascript/Angular

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

  // This json object contain only one entry as an example
  $scope.heroes = [
    {'name': 'Captain America', 'team': 'Avengers', 'bio': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae metus placerat, condimentum nisl et, accumsan sapien. Quisque molestie magna nulla, id malesuada sem interdum a.'}
  ];

  $scope.addDefaultState = function(val) {
    for (var i=0;i<$scope.heroes.length;i++) {
      $scope.heroes[i].state = val;
    }
  } 
  $scope.addDefaultState(false);

  $scope.toggle = function(status) {
    $scope.heroes.forEach(function(e) {
      e.state = status;
    });
  }

});

codepen.io - Working example (with corrections)

Upvotes: 0

Views: 1342

Answers (1)

Beroza Paul
Beroza Paul

Reputation: 2117

In my opinion the static json should not contain Boolean state value. It is okay to dynamically add values for visual presentation.

In your code the function addDefaultState is not needed. The is-open="hero.state" will take care of default state cause initially it will not find state and will consider it as false. So you change your code like below it should work too: 

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

  // This json object contain only one entry as an example
  $scope.heroes = [
    {'name': 'Captain America', 'team': 'Avengers', 'bio': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae metus placerat, condimentum nisl et, accumsan sapien.'}
  ];

  $scope.toggle = function(status) {
    $scope.heroes.forEach(function(e) {
      e.state = status;
    });
  }

});

Upvotes: 1

Related Questions