13187

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

Question:

I've got select elements that have the same options across the whole app, but may look a bit differently, e.g. selects for user's birthday (day, month, year).

Is there a way to create a directive that would provide values/expression for ng-options?

E.g. <select my-options-months></select>, where my-options-months would automatically create options with values 1..12 using ng-options directive.

Answer1:

<strong>Updated answer</strong> Your directive would like this:

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

Please, checkout fiddle with example <a href="http://jsfiddle.net/KN9xx/39/" rel="nofollow">http://jsfiddle.net/KN9xx/39/</a>

Answer2:

If you are planning to create a range of values in select just put it in a template. And if the range has to be dynamic just link it to a attribute in a 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>

Demo: <a href="http://plnkr.co/edit/tL694zGr5tZJq5L4pwEA?p=preview" rel="nofollow">http://plnkr.co/edit/tL694zGr5tZJq5L4pwEA?p=preview</a>

Answer3:

may be with a different approach with a filter like:

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

Recommend

  • angular 1.4.x ngOptions insert the type of the value into value attr
  • Random function triggering $digest() error
  • docker-compose: connection refused between containers, but service accessible from host
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • Accessing 3rd level of JSON with Angular ng-repeat
  • Slicing an SPA into several components and use AngularJS
  • to implement a spinner in angular2+
  • Android Database Error - getWriteableDatabase
  • htaccess add www if not subdomain, if subdomain remove www
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • Is there a perl module to validate passwords stored in “{crypt}hashedpassword” “{ssha}hashedpassword
  • JSON response opens as a file, but I can't access it with JavaScript
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Allowing both email and username for authentication
  • jQuery .attr() and value
  • Meteor helpers not available in Angular template
  • Email format validation in mvc3 view
  • Regex thinks I'm nesting, but I'm not
  • req.body is undefined - nodejs
  • Accessing IRQ description array within a module and displaying action names
  • How to get a value (ex: baseURL) in every Karate feature?
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • angularjs unit test when to use $rootScope.$new()
  • How to set/get protobuf's extension field in Go?
  • Submit form in a displaytag pagination
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • How to get next/previous record number?
  • Confusion with PayPal's monthly billing cycle
  • bootstrap to use multiple ng-app
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Running Map reduces the dimensions of the matrices
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?