Angularjs - UI Boostrap: Akkordeon Öffne und schließe alle

Question

Ich habe einen Code geschrieben, um alle Tabs eines Akkordeons zu öffnen und zu schließen, bzw. benutze einen separaten 'Öffnen' und 'Schließen' Knopf. Wie auch immer, ich muss dynamisch ein Schlüsselwertpaar (einen Booleschen Wert) zu meinen JSON-Daten hinzufügen.

Was ist die beste Vorgehensweise in dieser Situation? sollte ich den Booleschen Wert als statisches JSON-Element hinzufügen oder ist es in Ordnung, Werte dynamisch hinzuzufügen, wenn deren einziger Zweck die visuelle Struktur und nicht die tatsächlichen Objektdaten sind?

HTML/Angular Richtlinien

<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/Schräg

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)

Answer 1

Meiner Meinung nach die statische json nicht Boolesche Zustandswert enthalten sollte. Es ist in Ordnung, Werte für die visuelle Darstellung dynamisch hinzuzufügen. In Ihrem Code wird die Funktion addDefaultState nicht benötigt. Der is-open = "held.state" wird sich um den Standardstatus kümmern, weil er anfangs den Status nicht finden wird und ihn als falsch betrachten wird. So ändern Sie Ihren Code wie unten, sollte es auch funktionieren:

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; 
    }); 
    } 

});