如何创建一个为ng-options提供值的指令

How to create a directive that provides values for ng-options?

本文关键字：ng-options 指令 何创建 创建 一个      更新时间：2023-09-26

我有选择元素在整个应用程序中具有相同的选项，但可能看起来有点不同，例如选择用户的生日(日，月，年)。

是否有一种方法来创建一个指令，将为ng-options提供值/表达式?

。<select my-options-months></select>，其中my-options-months将使用ng-options指令自动创建值为1..12的选项

更新答案你的指令应该是这样的:

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/

如果您打算在select中创建一个范围的值，只需将其放在模板中。如果这个范围必须是动态的，就把它链接到指令中的一个属性。

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>

演示:http://plnkr.co/edit/tL694zGr5tZJq5L4pwEA?p=preview

可以使用不同的方法使用过滤器，如:

.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;
        };
    })
相关文章：