Використання angularjs-фільтра у вхідному елементі

Сподіваюся, я не пропустив нічого очевидного в доко, якщо є, впевнений, хтось допоможе.

Я використовую 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-моделі. Тому я пропоную вам скористатися найпростішим підходом і застосувати фільтр всередині контролера, використовуючи окрему змінну для відформатованої дати та залучаючи спостерігачів для синхронізації відформатованих та оригінальних дат:

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 і використовувати хороший, старий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

Я вважаю, що це саме те, що вам потрібно.