Question

我写了一些代码来打开和关闭手风琴的所有标签分别使用一个单独的'打开'和'关闭'按钮。但是，我需要动态地将一个键值对（一个布尔值）添加到我的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 /角

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 =＆＃34; hero.state＆＃34; 将处理默认状态，因为最初它不会找到状态并将其视为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 Boostrap：Accordion打开并关闭所有

1 个答案: