Question

我疯了！

是否可以创建一个指令，将不同的时间（00：15,00：30,00：45）等渲染到一个选择框中，我的ngModel使用对象如下所示的小时和分钟？

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

我的想法是使用ngModel。$ formatters，ngModel。$ parsers和ngModel。$ render使得可以在选择框的文本表示和ngModel之间进行双向绑定。

参见JSFiddle http://jsfiddle.net/52kUy/23/

我一直在使用解决方案将ng-change附加到选择框，但我还需要在应用程序中使用ng-change来响应时间变化。

注意：为了简化代码，我删除了字符串的填充（00:15 =＆gt; 0:15等）。

非常感谢任何指示。

Answer 1

这是你的意思吗？

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

编辑：

回答你的问题，如果你想初始化选择模型而你的模型是一个对象，那么比较将通过引用来完成;看看这个：angular docs，特别是这一行：“注意：ngModel通过引用进行比较，而不是值。当绑定到一个对象数组时，这很重要。请参阅这个jsfiddle中的一个例子。”除非您按表达式定义轨道，否则我们可以执行以下操作：

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

Answer 2

Ng-options通过引用工作，因此通过在ng-options中进一步扩展Wawy的解决方案，它可以按价值运作。

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

});

AngularJS指令，带有模板中的select和ng-options

2 个答案: