使用带有 ngModel 选项的对象 Select

Question

我正在构建一个日期时间 select 或 Angular 并且很难弄清楚如何使用 ng-model 的对象。我有一个小时散列，name 值为 1-12，每个小时都有一个 AM 和 PM 值。我毫不费力地让 ng-options 使用正确的 names/values 生成一个选项 select，但是我很难弄清楚如何将 ng-model 设置为 select根据我在 newPost 模型中设置的初始值从列表中选择正确的。

我认为有以下标记：

<div>
    <select name="hour" ng-options="hour.value as hour.name for hour in hours" ng-model="newPost.hour"></select>
</div>

然后在我的控制器中构建我的 currentHour 对象，如下所示：

var currentHourName = ((new Date()).getHours() + 24) % 12 || 12;
var currentHour = {
    name: currentHourName,
    value: {
        'AM': (((new Date()).getHours() + 24) % 12),
        'PM': (((new Date()).getHours() + 24) % 12) + 12
    }
};

// Ancillary attributes omitted for brevity.
$scope.newPost = {
    hour: currentHour
};


$scope.hours = [
    {name: 1, value: {'AM': 0,'PM': 12}},
    {name: 2, value: {'AM': 1,'PM': 13}},
    {name: 3, value: {'AM': 2,'PM': 14}},
    {name: 4, value: {'AM': 3,'PM': 15}},
    {name: 5, value: {'AM': 4,'PM': 16}},
    {name: 6, value: {'AM': 5,'PM': 17}},
    {name: 7, value: {'AM': 6,'PM': 18}},
    {name: 8, value: {'AM': 7,'PM': 19}},
    {name: 9, value: {'AM': 8,'PM': 20}},
    {name: 10, value: {'AM': 9,'PM': 21}},
    {name: 11, value: {'AM': 10,'PM': 22}},
    {name: 12, value: {'AM': 11,'PM': 23}}
];

我想知道如何使用 ng-model 来完成这项工作。

Answer 1

您可以在 ng-options 中使用 track by。除了这个 angular 不知道如何比较你的 ng-model 和选项之间的相等性。但是，如果您提供 track by 字段名称，它将使用该字段来检查是否相等。

这是 plunker 中的一个工作示例：Plunker Link

使用带有 ngModel 选项的对象 Select

Using an Object with ngModel Option Select

angularjs

angular-ngmodel