在 AngularJS 中处理转换后的数据答案

【问题标题】：Dealing with transformed data in AngularJS在 AngularJS 中处理转换后的数据
【发布时间】：2013-03-30 11:49:54
【问题描述】：

我有一个时间戳列表。我可以用 AngularJS 列出它们。但是我想将它列为日期字符串。这些日期字符串应该是可编辑的 - 当它完成时，我也希望更新相关的时间戳。

我的第一个问题是：AngularJS 以不同的格式（过滤器？）呈现项目并且仍然具有双向数据绑定的方式是什么？（模块、指令、监听器？）

谢谢

【问题讨论】：

为什么不直接从时间戳创建一个Date 对象，并在需要时使用.getTime() 取回时间戳？ var d = new Date(timestamp); console.log(d); console.log(d.getTime());
这里有一些解决方案stackoverflow.com/questions/14474555/…

标签： javascript angularjs

【解决方案1】：

如果您的可编辑数据是原始数据（时间戳），那么您shall go with filters。

但是，如果您希望它可以以日期字符串格式编辑，则需要创建一个指令来增加 ngModel+input，通过添加自定义 $parsers 和 $formatters。

其实很简单：

app.directive('dateFormat', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      ngModelCtrl.$formatters.unshift(function(valueFromModel) {
        // return how data will be shown in input
      });

      ngModelCtrl.$parsers.push(function(valueFromInput) {
        // return how data should be stored in model
      });
    }
  };
});

在您的 HTML 中：

<input type="text" ng-model="date" date-format />

该指令将需要ngModelController，以便您可以增强其行为。

发了Plunker。当然，如果您需要简单的日期操作，请考虑在指令中以编程方式使用过滤器，这样您就不会重复已经实现的过滤器。我在 Plunker 中使用它，所以你可以看看如何使用。

【讨论】：