Verwenden des Winkelfilters im Eingabeelement

Ich hoffe, ich habe nichts Offensichtliches im Dokument verpasst, wenn ich es habe, bin ich sicher, dass jemand helfen wird.

Ich verwende asp.net webapi, um ein DTO mit Datumsfeldern zurückzugeben. Diese werden mit JSON.Net (im Format '2013-03-11T12: 37: 38.693') serialisiert.

Ich möchte einen Filter verwenden, aber ist dies in einem INPUT-Element möglich oder sollte ich einen neuen Filter oder eine neue Direktive erstellen, um dies zu erreichen?

// 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'}}

Gibt es eine Verknüpfung, die mir fehlt?

Kurz gesagt: Wenn Ihre Daten in der Ansicht und im Modell eine andere Darstellung haben sollen, benötigen Sie eine Direktive , die Sie sich als Zwei-Wege-Filter vorstellen können .

Ihre Richtlinie würde ungefähr so ​​aussehen

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" /> 

Hier ist ein funktionierendes jsFiddle- Beispiel.

Unterschiedliche Werte in Ihrem Eingabefeld und in Ihrem Modell zu haben, widerspricht der Natur des ng-Modells. Ich schlage daher vor, dass Sie den einfachsten Ansatz wählen und Ihren Filter innerhalb des Controllers anwenden, eine separate Variable für das formatierte Datum verwenden und Beobachter einsetzen, um formatierte und ursprüngliche Daten synchron zu halten:

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'};

});

Wenn Ihre Eingabe nur Daten anzeigt

Wenn Sie tatsächlich eine Eingabe benötigen, um einfach einige Informationen anzuzeigen, und es sich um ein anderes Element handelt, das das Winkelmodell ändert , können Sie eine einfachere Änderung vornehmen.

Anstatt eine neue Direktive zu schreiben, BENUTZEN Sie einfach NICHT die ng-modelund verwenden Sie gut, alt value.

Also statt:

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

Das wird es tun:

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

Und funktioniert wie ein Zauber :)

Vollständiges Beispiel, das Zahlen formatiert und alle 3 Zeichen Leerzeichen einfügt, beginnend am Ende:

'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, '')

Verwendung:

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

Plunkr-Beispiel: http://plnkr.co/edit/qo0h9z

Angular verfügt über eine integrierte Datumsformatfunktion. Um diese jedoch auf eine Eingabe anzuwenden, bei der Sie möglicherweise das unformatierte (unformatierte) Datum erhalten möchten, müssen Sie eine benutzerdefinierte Direktive erstellen .

Beispielrichtlinie:

(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;
                });
            }
        };
    }]);
})();

Dann, um es anzuwenden:

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

Sie müssten keinen neuen Filter von Null erstellen, da Angular bereits einen Filter für Datumstypen integriert hat. http://docs.angularjs.org/api/ng.filter:date

Ich glaube, genau das brauchen Sie.