0

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!

user2994871
  • 177
  • 2
  • 13
  • You can read this article: http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges to see how to loop over ranges by defining your own filter. It’s really handy. – 2ps Sep 28 '16 at 04:25

1 Answers1

2

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>
Slava Utesinov
  • 13,410
  • 2
  • 19
  • 26
  • thanks! That's awesome! [code]res.push((temp > 9 ? "" : "0") + temp + (i % 2 == 1 ? ":30" : ":00"));[/code] How would I need to change this in oder to replace the '**:30's with a '-' and remove the blank '-'s? – user2994871 Sep 28 '16 at 09:06
  • Perfect! Thank you very much! – user2994871 Sep 29 '16 at 03:24