如何在显示之前格式化范围对象中的数据?

时间:2015-11-17 18:58:47

标签: javascript json angularjs

我已经实现了一个表可以得到一个订单列表。

我需要弄清楚如何选择和重命名一个值。在这种情况下:

1)使用$ .http调用数据,我得到了响应数据:

    {
        "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)我已经完成了一个设置和控制器,它将$ scope作为$ scope.list分配给response.orders。

3)我使用ng-repeat制作HTML以在以下代码段中呈现:

    <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>

它工作正常,但我需要知道如何替换{{x.created_at_format}}的每个值的单词,如:

&#34; 2015年10月24日&#34; &#34; 24 de Octubre de 2015&#34;

满足选择不同月份和重命名的条件。

2 个答案:

答案 0 :(得分:1)

您可能想要使用自定义过滤器。这是一个开始:

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

答案 1 :(得分:1)

我建议使用标准日期格式,例如The "right" JSON date format

如果你不能,我建议你使用过滤器,拆分created_at_format并在字符串模板上替换标记。

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>