user2994871 user2994871 - 2 months ago 34
AngularJS Question

ng-repeat build timeline table

I am trying to build a simple 24 hour timeline table that looks like this

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


I have been fiddling with something like...

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


Obviously this doesn't work. Can someone please provide a better solution? Thanks!

Answer

Try this solution:

(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);
<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>