Angularjs

Question

我写了一些代码来打开和关闭手风琴的所有选项卡，分别使用单独的 'open' 和 'close' 按钮。它如何要求我向我的 json 数据动态添加键值对（布尔值）。

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

HTML/Angular 指令

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

Answer 1

我认为静态 json 不应包含布尔状态值。为视觉呈现动态添加值是可以的。

在您的代码中不需要函数 addDefaultState。 is-open="hero.state" 将处理默认状态，因为最初它不会找到状态并将其视为 false。所以你像下面这样改变你的代码它应该也能工作：

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

});

Angularjs - UI Bootstrap：手风琴打开和关闭所有

Angularjs - UI Boostrap: Accordion Open and close all

javascript

json

angular-ui-bootstrap