Comment créer une directive qui fournit des valeurs pour ng-options?

Question

J'ai sélectionner les éléments qui ont les mêmes options à travers l'ensemble de l'application, mais peut paraître un peu différemment, par exemplesélectionne pour l'utilisateur de l'anniversaire de naissance (jour, mois, année).

Est-il un moyen de créer une directive qui permettrait de fournir des valeurs d'expression, pour ng-options?

E. g. <select my-options-months></select>, où my-options-months serait de créer automatiquement des options avec des valeurs 1..12 à l'aide de ng-options la directive.

Answer 1

Mise à jour de réponse Votre directive serait comme ceci:

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);
            };
        }
    }
})

S'il vous plaît, la caisse de violon avec exemple http://jsfiddle.net/KN9xx/39/

Answer 2

Si vous envisagez de créer une plage de valeurs de sélectionner juste les mettre dans un modèle.Et si la gamme doit être dynamique tout simplement un lien vers un attribut dans une directive.

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>

Démo: http://plnkr.co/edit/tL694zGr5tZJq5L4pwEA?p=preview

Answer 3

peut-être avec une approche différente avec un filtre comme:

.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;
        };
    })