ng-重复而不创建标签

ng-repeat without creating tags

本文关键字：创建 标签 ng-      更新时间：2023-09-26

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

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

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 之间。

在这里测试它。

一些

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

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

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

请检查一下(Simple 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>
相关文章：