在AngularJS转换后的数据处理 [英] Dealing with transformed data in AngularJS

问题描述

我有时间戳的列表。我可以和AngularJS一一列举。不过，我想将其列为日期字符串。这些日期字符串应该为可编辑 - 当它的完成我想有相关的时间戳更新过

I have a list of timestamps. I can list them with AngularJS. However I want to list it as date strings. Those date strings should be editable - and when it's finished I would like to have the related timestamp updated too.

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

My first question is: what is the AngularJS way of presenting items in a different format (filters?) and still have the bidirectional data binding? (Module, directive, listeners?)

感谢您

推荐答案

如果您编辑的数据是原始数据（时间戳），比你的应滤波器去了。

If your editable data is the raw data (Timestamp), than you shall go with filters.

但是，如果你希望它是日期字符串格式编辑的，比你需要ngModel +输入，通过添加自定义创建一个指示，以加强 <一个href=\"http://docs.angularjs.org/api/ng.directive%3angModel.NgModelController#%24parsers\"><$c$c>$parsers和<一个href=\"http://docs.angularjs.org/api/ng.directive%3angModel.NgModelController#%24formatters\"><$c$c>$formatters.

But if you want it to be editable in date string format, than you'll need to create a directive to augment the ngModel+input, by adding custom $parsers and $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 这样你就可以增强其行为。

The directive will require ngModelController so you can augment its behavior.

做了一个 Plunker 。当然，如果你需要简单的日期操作，可以考虑使用过滤器的编程指令里面，这样你就不会重复已经实现了过滤器。我使用它Plunker，所以你可以看到如何使用。

Made a Plunker. Of course, if you need simple date manipulation, consider using Filters programmatically inside your directive, so you don't repeat already implemented filters. I'm using it in Plunker, so you can see how to use.

这篇关于在AngularJS转换后的数据处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！