Verwenden des angularjs-Filters im Eingabeelement

Ich hoffe, ich habe nichts versäumt offensichtlich in der doco, wenn ich habe ich bin sicher, jemand wird Ihnen helfen.

Ich bin mit asp.net webapi, um wieder eine DTO -, mit Datum-Feldern. Diese werden serialisiert, mit JSON.Net (im format '2013-03-11T12:37:38.693').

Möchte ich einen filter verwenden, aber in ein INPUT-element, ist das möglich oder sollte ich einen neuen filter erstellen oder eine Richtlinie, 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 irgendeine Tastenkombination, die ich bin fehlt?

InformationsquelleAutor der Frage leon | 2013-03-11

131

Kurz gesagt: wenn Sie möchten, dass Ihre Daten haben eine unterschiedliche Darstellung in der Ansicht und im Modell, benötigen Sie eine Richtliniedie man sich vorstellen kann, wie ein zwei-Wege-filter.

Ihre Richtlinie Aussehen würde, so etwas wie

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 eine funktionierende jsFiddle Beispiel.

InformationsquelleAutor der Antwort finishingmove

Verschiedene Werte im Eingabefeld und in Ihrem Modell geht gegen die Natur des ng-Modells. Also ich schlage vor, Sie nehmen den einfachsten Ansatz und den filter anwenden in der Steuerung über eine separate variable für das formatierte Datum und die Beschäftigung von Beobachtern zu halten, formatiert und die ursprünglichen Termine zu synchronisieren:

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

});

InformationsquelleAutor der Antwort Stewie

16

Wenn Sie Ihre Eingabe zeigt nur die Daten

Wenn Sie wirklich brauchen einen input zu einfach display einige Informationen und es ist ein anderes element, dass änderungen das Eckige Modell können Sie leichter ändern.

Statt zu schreiben neue Richtlinie einfach NICHT VERWENDEN die ng-model und gute, alte value.

Also statt:
```
<input data-ng-model={{entity.date|date:'dd/MM/yyyy HH:mm:ss'}}" /> 
```
Wird dies tun:
```
<input value="{{entity.date|date:'dd/MM/yyyy HH:mm:ss'}}" /> 
```
Aus und funktioniert wie ein Charme 🙂

InformationsquelleAutor der Antwort Atais

Komplettes Beispiel, dass die Formate zahlen, das einfügen von Leerzeichen alle 3 Zeichen, beginnend vom 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

InformationsquelleAutor der Antwort Valentin

Eckig gebaut hat in Datumsformat Funktionalität, aber es anzuwenden, um eine Eingabe, wo man schließlich wie man die raw (unformatiert) Datum, müssen Sie erstellen eine benutzerdefinierte Richtlinie.

Beispiel Richtlinie:

(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 gilt es:

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

InformationsquelleAutor der Antwort pistol-pete

-3

Würden Sie nicht brauchen, um einen neuen filter anzulegen, der von null, da die eckige hat schon einen eingebauten filter für Datum-Typen.
http://docs.angularjs.org/api/ng.filter:date

Ich glaube, dass ist genau das, was Sie brauchen.

InformationsquelleAutor der Antwort odiseo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Wenn Sie Ihre Eingabe zeigt nur die Daten