Angularjs - UI Boostrap：Accordion打开和关闭所有

Question

我已经编写了一些代码来分别打开和关闭手风琴的所有选项卡，使用单独的“打开”和“关闭”按钮。这怎么需要我动态地向我的json数据添加一个键值对（一个布尔值）。

这种情况下的最佳做法是什么？我应该将布尔值添加为静态json元素，还是可以在其唯一目的是为了视觉结构而与实际对象数据无关时动态添加值。

HTML /角指令

<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 /角

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

在我看来，静态JSON不应包含布尔状态值。为视觉呈现动态添加值是可以的。

在您的代码中，函数addDefaultState不是必需的。 is-open =“hero.state”会照顾到默认状态原因，最初它不会找到状态并将其视为错误。所以你改变你的代码就像下面它应该工作：

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

});