Question

我想为<option>动态生成一个相当无聊的<select>次列表，

<select>
  <option>8:00am</option>
  <option>8:15am</option>
  <option>8:30am</option>
  <option>8:45am</option>
  <option>9:00am</option>
  <option>9:15am</option>
  <option>...</option>
  <option>5:00pm</option>
</select>

我知道如何产生会议记录，即

<option ng-repeat="minutes in ['00', 15, 30, 45]">8:{{minutes}}am</option>

显然我们需要几个小时的另一个循环，但这会在每四个<option>周围创建一组额外的标记，这会打破<select>。

如果没有创建任何代码，ngRepeat如何？

Answer 1

HTML：

<select>
    <option ng-repeat="h_m in [] track by $index | time:8:20:15">{{h_m}}</option>
</select>

AngularJS过滤器：

angular.filter('time', function() {
    return function(input, from, to, interval) {
        from     = parseInt(from, 10);
        to       = parseInt(to, 10);
        interval = parseInt(interval, 10);

        for(var i=from, y=0; i<=to; ++i, y+=interval) {
            for(var y=0; y<60; y+=interval) {
                input.push(((i % 12) || 12)+ ":" + (y===0?'00':y) +" " + (i>12?'pm':'am'));
            }
        }

        return input;
    };
});

您可以设置开始时间，结束时间和间隔：

time的 start_hour的 end_hour的 interval

start_hour和end_hour必须采用24时格式

interval只需几分钟，应该在1到59之间。

测试here。

Answer 2

一些无聊的答案与昂贵的内存分配：尝试这样的事情，你需要增加阵列......

！警告，你不想尝试这个！ =）

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script>
      // from 10/13/2014 0:0:0 gmt  = 1413129600
      // to 10/13/2014 24:59:59 gmt = 1413219599
      // 1413219599 - 1413129600 = 89999
      angular.module("ng").run(function($rootScope){
        $rootScope.array = new Array(89999).join('0').split('');

      })

    </script>
  </head>

  <body ng-app>
      <select>
          <option ng-repeat="n in array track by $index">{{1413129600+$index | date:"hh:mm:ss"}}</option>
      </select>
  </body>

</html>

Answer 3

请检查它（简单的javascript和angularjs）

<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<select>
<option ng-repeat="dt in date">{{dt}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.date=["0:00am"];
for(i=0;i<24;i++)
{

for(j=1;j<5;j++)
{

if(j==4)
{
  i++;
 if(i<12)
 {
  $scope.date.push(i+":"+"00"+"am");
 }
 else
 {
      if(i==24)
     {
     }
    else
   {
    $scope.date.push(i+":"+"00"+"pm");
   }

 }
  i--;

 }
else
{
if(i<12)
{
$scope.date.push(i+":"+j*15+"am");
}
 else
{
 $scope.date.push(i+":"+j*15+"pm");
}
 }
}
}
 });
 </script>
 </body>

ng-repeat而不创建标签

3 个答案: