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

我希望我不会错过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'}}

我缺少任何捷径吗？

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

您的指令看起来像

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示例。

在输入字段和模型中具有不同的值与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'};

});

如果您的输入仅显示数据

如果您实际上只需要输入即可显示一些信息，而正是其他一些元素更改了Angular模型，则可以进行更轻松的更改。

除了编写新的指令外，不要使用，ng-model而要使用good，old 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'}}" /> 

并且像魅力一样工作:)

完整的示例，它格式化数字，从末尾开始每3个字符插入一个空格：

'use strict'
String::reverse = ->
  @split('').reverse().join('')

app = angular.module('app', [])
app.directive 'intersperse', ->
  require: 'ngModel'
  link: (scope, element, attrs, modelCtrl) ->
    modelCtrl.$formatters.push (input) ->
      return unless input?
      input = input.toString()
      input.reverse().replace(/(.{3})/g, '$1 ').reverse()
    modelCtrl.$parsers.push (input) ->
      return unless input?
      input.replace(/\s/g, '')

用法：

<input ng-model="price" intersperse/>

Plunkr示例：http ://plnkr.co/edit/qo0h9z

Angular具有内置的日期格式功能，但是要将其应用于最终想要获取原始（未格式化）日期的输入，您需要创建一个自定义指令。

指令示例：

(function () {
    'use strict';

    angular.module('myApp').directive('utcDate', ['$filter', function ($filter) {
        return {
            restrict: 'A', //restricting to (A)ttributes
            require: 'ngModel',
            link: function (scope, elem, attrs, model) {
                if (!model) return;

                var format = 'MM/dd/yyyy h:mm:ss a';
                var timezone = 'UTC';

                //format the date for display
                model.$formatters.push(function (value) {
                    //using built-in date filter
                    return $filter('date')(value, format, timezone);
                });

                //remove formatting to get raw date value
                model.$parsers.push(function (value) {
                    var date = Date.parse(value);
                    return !isNaN(date) ? new Date(date) : undefined;
                });
            }
        };
    }]);
})();

然后应用它：

<input type="text" ng-model="$ctrl.DateField" utc-date />

您无需从零开始创建新的过滤器，因为angular已经为日期类型内置了过滤器。 http://docs.angularjs.org/api/ng.filter:date

我相信这正是您所需要的。