在input元素中使用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示例.

Answer 2

在输入字段和模型中使用不同的值违背了ng-model的本质.因此,我建议您采用最简单的方法并在控制器中应用过滤器,使用单独的变量进行格式化日期,并使用观察者保持格式化和原始日期同步:

HTML:

<input ui-datetime type="text" data-ng-model="formattedDate" />

JS:

app.controller('AppController', function($scope, $filter){

  $scope.$watch('entity.date', function(unformattedDate){
    $scope.formattedDate = $filter('date')(unformattedDate, 'dd/MM/yyyy HH:mm:ss a');
  });

  $scope.$watch('formattedDate', function(formattedDate){
    $scope.entity.date = $filter('date')(formattedDate, 'yyy/MM/dd');
  });

  $scope.entity = {date: '2012/12/28'};

});

Answer 3

如果您的输入仅显示数据

如果您确实需要一个输入来简单地显示一些信息,并且它是更改 Angular模型的其他元素,您可以更容易地进行更改.

而不是写新指令的根本不要使用了ng-model,用好的,旧的value.

所以代替:

<input data-ng-model={{entity.date|date:'dd/MM/yyyy HH:mm:ss'}}" /> 

这样做:

<input value="{{entity.date|date:'dd/MM/yyyy HH:mm:ss'}}" /> 

像魅力的工作:)