Get the result of ng-repeat and use at moment.js

Question

Get the result of ng-repeat and use at moment.js

Navigation

#1 by (2 votes)

2

I have an application that uses ng-repeat to list information. One of this information comes with a date as an example below, what happens is that I wanted to use the relative function of moment.Js . My difficulty is to get this value received and use the right parameters of moment.js .

<tbody>
    <tr ng-repeat="x in names">
        <td>
            {{ x.TempoEspera }} 
        </td> 
    </tr>                                               
</tbody>

value received="Timeout": "11/13/2014 17:17:47"

html angularjs

asked by anonymous 18.02.2016 / 11:51

1 answer

How to assign textview return to a string? Update a specific DIV without refreshing the page

score 2 · Accepted Answer

You can make a filter that receives the date and format as you wish:

angular.module("app", []);

angular.module('app').controller("myctrl", function() {
  
  var ctrl = this;
  ctrl.names = [{tempoEspera: "2015-01-01T01:00:00"}, {tempoEspera: "2016-01-01T23:00:59"}]

});

// cria um filtro que receba uma data e formata-a atraves do momentjs
angular.module('app').filter('formatarData', function() {
  return function(input) {

    if (!input) {
      return '';
    }

    return moment(input).format("LLLL"); // formata conforme a localização do utilizador. Alterar esta linha para alterar a forma como a data e formatada.
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="app" ng-controller="myctrl as ctrl">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Test</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in ctrl.names">
        <!--A cada iteração do ng-repeat, o filtro formatarData e aplicado ao conteudo da variavel x.TempoEspera -->
        <td>{{x.tempoEspera | formatarData}}</td>
      </tr>
    </tbody>
  </table>
</div>

In the example above, we have declared a filter called formatarData , which receives a string representing a date and formats it using momentjs .

In this specific case, you are formatting the date in the format LLLL - Month name, day of month, day of week, year, time

However, you can change the filter code to format the date to the format you need.