Create AngularJS Countdown With ng-repeat and API connection

Question

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

Moment js also provides this: github.com/urish/angular-moment#am-time-ago-directive You can always have a look how they do it in the source code... — Frank Adrian
– Frank Adrian, Commented May 2, 2016 at 15:50

OzW · Accepted Answer · 2016-05-02 15:47:12Z

1

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>

answered May 2, 2016 at 15:47

OzW

8581 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Lee Over a year ago

Thanks. sorry for the idiot question but how do i add it to my main.js? as what? I have there my states and directives. that is it

OzW Over a year ago

In my example, the app name is 'yourApp', so I in main.js I would get the app by calling angular.module('yourApp', []) then adding a filter by calling .filter. If you set your app object to a variable, than just call .filter on that variable.

Lee Over a year ago

I tried but I get errors. my main.js has states and other controllers which connect to it. so I an not sure where to add it. here: angular.module('Authentication', []); angular.module('app', []); angular.module('DashController',[]); angular.module('AppController',[]); angular.module('LayoutHorizontalMenuController',[]); angular.module('PageLiveController',[]);

OzW Over a year ago

I will need to see more code in order to help you... at least write the error you're getting (or look for examples on how to add a custom filter).

Lee Over a year ago

Great thanks. I added it but it is giving NaN. OzW, I used your code, what do I need to change for it to show it?

|

Collectives™ on Stack Overflow

Create AngularJS Countdown With ng-repeat and API connection

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related