2016-05-24 87 views
0

我已經編寫了一些代碼來分別打開和關閉手風琴的所有選項卡,使用單獨的「打開」和「關閉」按鈕。這怎麼需要我動態地向我的json數據添加一個鍵值對(一個布爾值)。Angularjs - UI Boostrap:Accordion打開和關閉所有

這種情況下的最佳做法是什麼?我應該將布爾值添加爲靜態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)

回答

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

}); 
+0

謝謝你的回覆,我很高興你同意我對json數據。說了你對'.addDefaultState()'函數的正確性。這是沒有必要的,完全消除了json數據的問題。但是有一個問題,我應該保留值'hero.state'還是用一個簡單的'false'值替換?編輯:改變'is-open'爲'is-open = false'不起作用。 –

+1

是的,你需要保持hero.state在那裏因爲切換功能設置真/假狀態模型。 is-open正在使用該模型。 –