javascript - 在 AngularJS 中处理转换后的数据

Question

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

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

谢谢

Answer 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 中使用它，所以你可以看到如何使用。