How to format data in a scope object before display?

Question

I've implemented a table can get a list of orders.

I need to figure out how to pick and rename a value. In this case:

1) Call a data using $.http and I got response data:

    {
        "orders":[
            {
                "created_at_format":"24 October 2015",
                "client":"Jason  ",
            },
            {
                "created_at_format":"25 October 2015",
                "client":"Jason  ",
            },
            {
                "created_at_format":"29 October 2015",
                "client":"Jason  ",
            },
            {
                "created_at_format":"30 October 2015",
                "client":"Jason  ",
            }
        ]
}

2) I've done a setup and controller that assigns $scope to response.orders as $scope.list.

3) I made HTML with ng-repeat to render in following snippet:

    <div ng-app="order_table" ng-controller="list">
    <table>
        <tbody>
            <tr ng-repeat="x in list">
                <td>{{ x.client}}</td>
                <td>{{ x.created_at_format}}</td>
            </tr>
        </tbody>
    </table>
</div>

It works fine but I need to know how to replace a word each value of {{ x.created_at_format}} like:

"24 October 2015" to "24 de Octubre de 2015"

To meet the condition to pick different month and rename.

So you are asking how to localize that string in a different language? — Mike Brant, Nov 17 '15 at 19:00
You can manipulate the data however you want in your controller. You need to be more clear on what you are trying to accomplish, and what you are having difficulty with. — forgivenson, Nov 17 '15 at 19:01
@MikeBrant Yes, it's a minor, I don't plan to use localization, just a basic string. — Ivan, Nov 17 '15 at 19:26
@forgivenson I still don't know how to edit data before render, since need to pick "october" needs to be modified, including all strings of months. — Ivan, Nov 17 '15 at 19:27

score 1 · Answer 1 · answered Nov 17 '15 at 20:08

You'd probably want to employ a custom filter. Here's a start:

angular.module('order_table').filter('dateFormat', function () {
    return function (str) {
        var newStr = str.replace('October', 'de Octubre de');
        return newStr;
    };
});

<td>{{ x.created_at_format | dateFormat }}</td>

Demo

http://docs.angularjs.org/api/ng/filter/filter

score 1 · Accepted Answer · edited May 23 '17 at 11:44

I recommend to use standarized date format like The "right" JSON date format .

in case you can't, I recomend you to use a filter, split the created_at_format and replace tokens on a string template.

angular.module('myModule')
  .filter('myDateFormat', function () {

    var TEMPLATE = "{day} de {month} de {year}";

    var MonthMap = {
      "January": "Enero",
      "Febrary": "Febrero",
      "March": "Marzo",
      "April": "Abril",
      "May": "Mayo",
      "June": "Junio",
      "July": "Julio",
      "August": "Agosto",
      "September": "Septiembre",
      "October": "Octubre",
      "November": "Noviembre",
      "December": "Diciembre"
    };
    return function (input, format) {
        var format = format || TEMPLATE;
        var arrDay = input.split(" ");
        return format
          .replace('{day}', arrDay[0])
          .replace('{month}', MonthMap[ arrDay[1] ])
          .replace('{year}', arrDay[2]);
    };
});

<td>{{ x.created_at_format | myDateFormat }}</td>

// With filter function, make sure all {} are closed
<td>{{ x.created_at_format | myDateFormat: '{day}/{month}/{year}' }}</td>

How to format data in a scope object before display?

2 Answers2