在输入元素中使用angularjs过滤器

Question

我希望我不会错过doco中任何明显的内容，如果可以的话，我相信有人会帮助您。

我正在使用asp.net
webapi返回带有日期字段的DTO。这些使用JSON.Net（格式为‘2013-03-11T12：37：38.693’）进行序列化。

我想使用过滤器，但是在INPUT元素中，这是否可行，或者我应该创建一个新的过滤器或指令来完成此操作？

// this just displays the text value
<input ui-datetime type="text" data-ng-model="entity.date" /> 
// this doesn't work at all
<input ui-datetime type="text" data-ng-model="{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}" /> 
// this works fine
{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}

我缺少任何捷径吗？

Answer 1

简而言之：如果希望数据在视图和模型中具有不同的表示形式，则需要一个 指令 ，可以将其视为 双向过滤器 。

您的指令看起来像

angular.module('myApp').directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

HTML：

<input my-directive type="text" data-ng-model="entity.date" />

这是一个有效的jsFiddle示例。