Reputation: 57
http://plnkr.co/edit/KEhcaEs2GptBlF60KAXi?p=preview
I'm trying to create an accordion with multiple options in each group. Once a selection is made in a group the group below it is enabled and expanded to allow for the next selection. I got the UI to work, but when I store the selection it gets overridden every time I select something.
How can I persist the selected values?
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope. oneAtATime = true;
$scope.selectedCar = {
make: null,
model: null,
year: null,
comments: null
}
$scope.setSelectedCar = function (key, value) {
$scope.selectedCar[key] = value;
}
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
$scope.cars = {};
});
Upvotes: 1
Views: 126
Reputation: 6491
The reason your values do not persist is because they are being overriden:
<accordion-group heading="Model" is-open="selectedCar.make" is-disabled="!selectedCar.make">
The attribute is-open="selectedCar.make"
will actually set selectedCar.make
to false
once the accordion is closed.
Same goes for all other values.
Here's a working plunker. (also containing fixes to a few other problems like inappropriate data-binding for selectedCar
and stuff...)
Upvotes: 3