[英]How to create a directive that provides values for ng-options?
我在整个应用程序中拥有具有相同选项的select元素,但外观可能有所不同,例如选择用户生日(天,月,年)。
有没有一种方法可以创建为ng-options
提供值/表达式的指令?
例如<select my-options-months></select>
,其中my-options-months
将使用ng-options
指令自动创建值为1..12
ng-options
。
更新的答案您的指令如下:
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.selectedMonth = 3
})
.directive('myOptionsMonths', function ($compile) {
return {
priority: 1001, // compiles first
terminal: true, // prevent lower priority directives to compile after it
compile: function (element, attrs) {
element.attr("ng-options", "m for m in months");
element.removeAttr('my-options-months'); // necessary to avoid infinite compile loop
var fn = $compile(element);
return function (scope) {
scope.months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
fn(scope);
};
}
}
})
请通过示例http://jsfiddle.net/KN9xx/39/查看小提琴
如果您打算选择创建一系列值,只需将其放在模板中即可。 如果范围必须是动态的,只需将其链接到指令中的属性即可。
app.directive('myOptionsMonths', function(){
return {
scope: {
myOptionsMonths:"@"
},
link: function(scope,e, a){
var N = +a.myOptionsMonths;
scope.values = Array.apply(null, {length: N}).map(Number.call, Number);
},
template: "<select ng-model='t' ng-options='o for o in values'></select>"
};
});
<my-options-months my-options-months="10"></my-options-months>
可能采用不同的方法,例如:
.filter('range', function () {
return function (input, min, max, padding){
min = parseInt(min);
max = parseInt(max);
padding = padding ? padding : false;
for (var i=min; i<=max; i++){
input.push(padding ? ("00" + i).slice (-2) : i + '');
}
return input;
};
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.