I use angularJs and bootstrap. I have made an accordion where I have put a select for choose the value of the filter and the data-ng-model which doesn't work (the select works if he is not in an accordion). Here is my code:
<accordion close-others="oneAtATime">
<accordion-group is-open="isOpen">
<accordion-heading>
Country<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
</accordion-heading>
<select data-ng-model="country" class="input-medium inputFilter form-control">
<option value="">All country</option>
<option value="1">Switzerland</option>
<option value="2">France</option>
<option value="3">Spain</option>
</select>
</accordion-group>
</accordion>
<div data-ng-repeat="city in listcity |filter:country">
{{city.name}}, {{city.country}}
</div>
I have look at UI-Bootstrap for the accordion. I thinks I had to do a directive for make it work but the directive doesn't work with the accordion. here is my directive which doesn't work
app.directive('accordion', function () {
return {
scope: {
dataNgModel: '=',
},
};
});
I am not sure if this is what you wanted. But i use ng-change to setup the new filter value.
Controller:
function AccordionDemoCtrl($scope) {
$scope.oneAtATime = true;
//default: all countrys
$scope.country = '';
//example data
$scope.listcity = [{
name: 'Madrid',
country: '3'
}, {
name: 'Paris',
country: '2'
}, {
name: 'Lyon',
country: '2'
}, {
name: 'Zurich',
country: '1'
}];
//set a new selection
$scope.setCountry = function(cid) {
$scope.country = cid;
}
}
Markup:
<select ng-model="country" ng-change="setCountry(country)" class="input-medium inputFilter form-control">
See it working here
Btw: The example directive is the shortest I have ever seen. Ahh, I whish it was that easy:-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With