模板中带有select和ng选项的AngularJS指令

我快发疯了

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

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

我的想法是使用ngModel.$formatters、ngModel.$parsers和ngModel.$render使选择框的文本表示和ngModel之间具有双向绑定成为可能

参见JSFiddle

我一直在使用一种将ng更改附加到selectbox的解决方案，但我还需要ng更改在应用程序中可用，以对时间更改作出反应

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

---

非常感谢您的指点。

这就是您的意思吗

HTML:

编辑：

回答你的问题，如果你想初始化一个选择模型，并且你的模型是一个对象，那么比较将通过引用完成；请看以下内容：，特别是这一行：“注意：ngModel按引用进行比较，而不是按值进行比较。这在绑定到对象数组时非常重要。请参阅本JSFIDLE中的示例。”除非您按表达式定义轨迹，否则在您的情况下，我们可以执行以下操作：

HTML:

---

Ng选项通过引用工作，因此通过ffurther扩展Wawy的解决方案，通过Ng选项跟踪，它可以通过值工作

HTML:

---

感谢使用过滤器的提示！更新了小提琴以尝试它。但是，当我使用数组中存在时间的对象定义$scope.blah时，select没有使用正确的值初始化。如果我创建一个数组引用的值对象，并在$scope.blah中进行设置，它就可以工作。（通过引用）。有什么想法吗？没错。我也有同样的发现。下面的例子。接受答案：）

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

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

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

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

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

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

});