AngularJS directive with select and ng-options in template

Question

I'm going nuts!

Is it possible to create a directive that renders different times (00:15,00:30,00:45) etc into a select box where my ngModel uses objects for hours and minutes like below?

{
   "h" : 1,
   "m" : 30
}

My idea is to use ngModel.$formatters, ngModel.$parsers and ngModel.$render to make it possible have bi-directional bindings between the textual representation of the select box and the ngModel.

See JSFiddle http://jsfiddle.net/52kUy/23/

I have been playing with a solution to attach an ng-change to the selectbox but I also need the ng-change to be available in the application to react to time changes.

Note: To simplify the code I have removed padding of the strings (00:15 => 0:15 etc).

Super thankful for any directions.

Wawy · Accepted Answer · 2014-11-21 09:25:43Z

1

Is this what you meant?

HTML:

<div ng-app="HelloApp" ng-controller="HelloController">
    <select ng-model="blah" ng-options="value as value | myfilter for value in values"></select>
    {{blah}}
</div>

JS:

app.filter('myfilter', function() { 
    return function(obj) {
        return obj.h + ':' + obj.m;
    }
});
app.controller('HelloController', function($scope) {
    $scope.values = [{
       "h" : 1,
       "m" : 30
    }, {
       "h" : 1,
       "m" : 25
    }];

jsfiddle

EDIT:

Answering your question, if you want to initialize a the select model and your model is an object the comparison will be done by reference; have a look at this: angular docs, specially this line: "Note: ngModel compares by reference, not value. This is important when binding to an array of objects. See an example in this jsfiddle." Unless you define a track by expression, in your case we could do something like this:

HTML:

<div ng-app="HelloApp" ng-controller="HelloController">
    <select ng-model="blah" ng-options="value as value | myfilter for value in values track by value.h + ":" + value.m"></select>
    {{blah}}
</div>

JS:

app.filter('myfilter', function() { 
    return function(obj) {
        return obj.h + ':' + obj.m;
    }
});
app.controller('HelloController', function($scope) {
    $scope.values = [{
       "h" : 1,
       "m" : 30
    }, {
       "h" : 1,
       "m" : 25
    }];


   $scope.blah = {h: 1, m: 25};
});

plunker

edited Nov 21, 2014 at 9:25

answered Nov 20, 2014 at 22:57

Wawy

6,2692 gold badges26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niclas Over a year ago

Thank for the tip of using filter! Updated the fiddle jsfiddle.net/niclas_lindberg/37dqrb08/2 to try it. But the select doesn't initialize with the correct value when I define $scope.blah with an object with a time that exists in the array. If I create a value object referred to by the array and set in $scope.blah it works. (By reference). Any ideas?

Niclas Over a year ago

Correct. I made the same discovery. Example below. Accepted answer. :)

Niclas · Accepted Answer · 2014-11-21 09:22:22Z

Ng-options work by reference so by ffurther extending Wawy's solution with track by in ng-options it works by value.

HTML:

<div ng-app="TestApp" ng-controller="HelloController">
    <select ng-model="blah" ng-options="value as value | myfilter for value in values track by id(value)">    </select>
    {{blah}}
</div>

JS:

var app = angular.module('TestApp',[]);

app.filter('myfilter', function() { 
    return function(obj) {
        return obj.h + ':' + obj.m;
    }
});

app.controller('TestController', function($scope) {

    $scope.id = function(obj) {
        return obj.h + ":" + obj.m;  
    };

    $scope.values = [{
       "h" : 1,
       "m" : 30
    },
    {
       "h" : 1,
       "m" : 25
    }];

    $scope.blah = {"h":1,"m":25}; 

});

Collectives™ on Stack Overflow

AngularJS directive with select and ng-options in template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related