创建全面小时为单位选择列表 [英] Creating select list in full-hour increments

问题描述

有没有一种方法来产生类似以下标记：

Is there a way to generate something like the following markup:

<select> 
    <option value="0000">00:00AM</option>
    <option value="0100">01:00AM</option>
    <option value="0200">02:00AM</option>
    <option value="0300">03:00AM</option>
    <!--rest of options omitted for brevity-->
</select>

...直至11:00 PM一路，

... all the way up to 11:00PM,

我使用的是棱角分明。

什么是做到这一点的最好方法是什么？

What is the best way to do this?

推荐答案

在某些控制器，你应该pre-生成这些值：

In some controller you should pre-generate these values:

$scope.hours = {};

//first 12 hours
$scope.hours['0000'] = '12:00AM';
for(var i = 1; i < 12; ++i) {
    var hour = i < 10 ? '0' + i : i;
    $scope.hours[hour + '00'] = hour + ':00AM';
}

//last 12 hours
$scope.hours['1200'] = '12:00PM';
for(var i = 1; i < 12; ++i) {
    var hour = i < 10 ? '0' + i : i;
    $scope.hours[i + 12 + '00'] = hour + ':00PM';
}

然后在你的模板：

And then in your template:

<select> 
    <option ng-repeat="(value, label) in hours | orderBy: value" value="{{ value }}">
        {{ label }}
    </option>
</select>

勾选此琴： http://jsfiddle.net/hspqfouq/1/

这篇关于创建全面小时为单位选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！