javascript - Angular bootstrap ui accordion group "open one at a time" not working -
i have been using angular ui-bootstrap. in here oneatatime not working though value set true. here code.
<div ng-repeat="group in groups track group.key"> <uib-accordion close-others="oneatatime"> <uib-accordion-group> <uib-accordion-heading > <div> {{ group.title }} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </div> </uib-accordion-heading> </uib-accordion-group> </uib-accordion> </div> plnkr link.
your html structure wrong. there should single uib-accordion element , multiple uib-accordion-group element. change code this:
<uib-accordion close-others="oneatatime"> <uib-accordion-group ng-repeat="group in groups track group.key"> <uib-accordion-heading> <div> {{ group.title }} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </div> </uib-accordion-heading> </uib-accordion-group> </uib-accordion> what did moved ng-repeat expression in uib-accordion-group element.
see working example below:
angular.module('ui.bootstrap.demo', ['nganimate', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('accordiondemoctrl', function($scope) { $scope.oneatatime = true; $scope.groups = [{ title: 'dynamic group header - 1', content: 'dynamic group body - 1', key: 1 }, { title: 'dynamic group header - 2', content: 'dynamic group body - 2', key: 2 }]; $scope.items = ['item 1', 'item 2', 'item 3']; $scope.additem = function() { var newitemno = $scope.items.length + 1; $scope.items.push('item ' + newitemno); }; $scope.status = { iscustomheaderopen: false, isfirstopen: true, open: true, isfirstdisabled: false }; });<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <script src="script.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="accordiondemoctrl"> <div class="checkbox"> <label> <input type="checkbox" ng-model="oneatatime">open 1 @ time </label> </div> <uib-accordion close-others="oneatatime"> <uib-accordion-group ng-repeat="group in groups track group.key"> <uib-accordion-heading> <div> {{ group.title }} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </div> </uib-accordion-heading> </uib-accordion-group> </uib-accordion> </div> </body> </html>
Comments
Post a Comment