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)
謝謝你的回覆,我很高興你同意我對json數據。說了你對'.addDefaultState()'函數的正確性。這是沒有必要的,完全消除了json數據的問題。但是有一個問題,我應該保留值'hero.state'還是用一個簡單的'false'值替換?編輯:改變'is-open'爲'is-open = false'不起作用。 –
是的,你需要保持hero.state在那裏因爲切換功能設置真/假狀態模型。 is-open正在使用該模型。 –