ng-repeat构建时间表

时间:2016-09-28 03:42:23

标签: javascript angularjs arrays

我正在尝试构建一个简单的24小时时间表,看起来像这样

-00:00
-
-00:30
-
-01:00
-
-01:30
-
...

我一直在摆弄...... ...

<table>
  <tr ng-repeat="t in _.range(0, 24) track by $index">
     <td>{{$index % 2 === 1 ? '-' : ( t | leadingzero : 2)}}</td>
  </tr>
<table>  

显然这不起作用。有人可以提供更好的解决方案吗?谢谢!

1 个答案:

答案 0 :(得分:2)

试试这个解决方案:

&#13;
&#13;
(function(angular) {
  'use strict';
var myApp = angular.module('app', []);

myApp.controller('TestController', ['$scope', function($scope) {
    $scope.ranges = function(from, to){
        var res = [];
        for(var i = from; i < to; i++)
            res.push((i > 9 ? "" : "0") + i + ":00");	        
        return res;
    }
}]);
})(window.angular);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="app">
  <div ng-controller="TestController">
    <table>
      <tbody>
        <tr ng-repeat-start="range in ranges(0, 24)">
          <td>-{{range}}</td>
        </tr>
        <tr ng-repeat-end ng-if="$index!=23">
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
&#13;
&#13;
&#13;