如何在显示之前格式化作用域对象中的数据

How to format data in a scope object before display?

本文关键字：对象 作用域 数据 格式化 显示      更新时间：2023-09-26

我已经实现了一个可以获取订单列表的表。

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

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分配给response.orders作为$scope.list.

3） 我制作了带有ng重复的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}}值的单词，比如：

"2015年10月24日"到"2015年10月24日"

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

我建议使用标准化的日期格式，如；右"；JSON日期格式。

如果不能，我建议您使用过滤器，拆分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>

您可能想要使用自定义过滤器。这里有一个开始：

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>

演示

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

相关文章：