使用 ng-model 使用 angularjs/ui-bootstrap 制作手风琴 [英] Make an accordion with angularjs/ui-bootstrap an using the ng-model
问题描述
我使用 angularJs 和引导程序.我制作了一个手风琴,其中我选择了过滤器的值和不起作用的数据模型(如果他不在手风琴中,则选择有效).这是我的代码:
<accordion-group is-open="isOpen"><手风琴标题>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="">所有国家</option><option value="1">瑞士</option><option value="2">法国</option><option value="3">西班牙</option></选择></accordion-group></手风琴><div data-ng-repeat="city in listcity |filter:country">{{city.name}}, {{city.country}}
我查看了手风琴的 UI-Bootstrap.我想我必须做一个指令才能使它工作,但该指令不适用于手风琴.这是我的指令,它不起作用
app.directive('accordion', function () {返回 {范围: {数据模型:'=',},};});
我不确定这是否是您想要的.但我使用 ng-change 来设置新的过滤器值.
控制器:
function AccordionDemoCtrl($scope) {$scope.oneAtATime = true;//默认:所有国家$scope.country = '';//示例数据$scope.listcity = [{name: '马德里',国家:'3'}, {name: '巴黎',国家:'2'}, {name: '里昂',国家:'2'}, {name: '苏黎世',国家:'1'}];//设置一个新的选择$scope.setCountry = 函数(cid){$scope.country = cid;}}
标记:
看到它在这里
顺便说一句:示例指令是我见过的最短的指令.啊,我希望就这么简单:-)
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:-)
这篇关于使用 ng-model 使用 angularjs/ui-bootstrap 制作手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!