CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Lee
Lee

Reputation: 21

Create AngularJS Countdown With ng-repeat and API connection

I have a Angularjs app. In the app I have a table which it's data is being displayed through ng-repeat and an API connection. Which means I am getting the info through the API connection in my controller. One of the data items is "date and time". When I use ng-repeat, I display the date like it is in the data base but I want to display it as a countdown and not exactly like in the data base.

Here is the HTML code:

 <tbody>
        <tr class="info" id="{{$index}}" ng-repeat="matches in future_match">
          <td style="text-align: center;">
          <img src="asset/images/loltables.png"></td>
          <td style="font-weight:bold;">{{matches.matche_title}} - Best Of {{matches.matche_bestOf}} 
          <br></br> <center><img ng-src="{{matches.competitors.0.c_img}}" style="padding-right: 30px; padding-bottom: 15px;"/><img ng-src="{{matches.competitors.1.c_img}}" style="padding-bottom: 15px;"/><br>{{matches.competitors.0.c_short_name}}&nbsp;&nbsp; <b>vs.</b> &nbsp;&nbsp;{{matches.competitors.1.c_short_name}}</center></td>
          <td style="text-align: center;"><i class="fa fa-dollar" style="color:green;"></i>50&nbsp;</td>
          <td style="text-align: center;">50</td>
          <td style="text-align: center;">{{matches.matche_start}}</td>
          <td style="text-align: center;"><button type="button" data-toggle="modal" data-target="#ava_gold"  ng-click="select(matches)" class="btn btn-info btn-circle">Enter</button></td>
        </tr>
    </tbody>

I just want to display it as a countdown and not like it is in the data base which is 03.12.2015 10:00:00 GTM

I am new to Angularjs so I need it simple and easy.

Thanks

Upvotes: 2

Views: 133

Answers (1)

OzW
OzW

Reputation: 858

One way to go at this is to create a custom filter, for instance:

angular.module('yourApp', []).filter('countdown', function() {
  return function(input) {
    var diff = input - new Date();
    //todo? convert diff from milliseconds into a more useful format
    return diff;
  };
});

The custom filter should be placed in the configuration file (possibly app.js), and than you could use it in the HTML page using the regular pipeline syntax:

<td style="text-align: center;">{{ matches.matche_start | countdown }}</td>

Upvotes: 1

Related Questions