AngularJS - Erstellen von benutzerdefinierten Konverter für eine Ansicht

Question

I AngularJS 1.5 und haben ein Objekt verwenden, sagen wir mal:

myObject = { 
    ts: 1497971053529, //time in ms 
    field: { a: b } //some object 
} 

ich Benutzer beobachten wollen und bearbeitenmyObject ‚s Felder, aber ich will ts zeigen als Datum (Tag, yyyy.mm.dd), und field sollte in JSON sein. So etwas Ähnliches:

<input type="text" ng-model="myObject.ts" 
    wtf-to-converter="longToDate" wtf-from-converter="dateToLong"> 
<input type="text" ng-model="myObject.field" 
    wtf-to-converter="objectToJson" wtf-from-converter="jsonToObject"> 

Ergebnis:

2017.06.20 
{"a":"b"} 

So wie diese Wandler zu implementieren? Wenn ich nur diese Werte beachten muss, kann ich AngularJS-Rohre verwenden: {{myObject.field | json }}, aber ich muss es auch bearbeiten.

Das könnte eine dumme Frage sein, aber ich bin Backend-Entwickler und noch nicht an Frontend-Funktionen gewöhnt. Danke für die Hilfe!

Answer 1

Sie könnten etwas wie das folgende Beispiel verwenden: Es ist eine Direktive, die Text in Datum und Datum in Text konvertiert mit Formatierer (Modell -> Benutzer) und Parsern (Benutzer -> Modell).

(function (angular) { 
    "use strict"; 

    angular.module("YourModule").directive("msDate", msDate); 

    function msDate() { 
     return { 
      restrict: "A", 
      require: "ngModel", 
      link: link 
     }; 

     function link(scope, element, attrs, ngModel) { 
      // From the user to the model 
      ngModel.$parsers.push(function (value) { 
       return new Date(value).getTime(); 
      }); 
      // From the model to the user 
      ngModel.$formatters.push(function (value) { 
       return new Date(value); 
      }); 
     } 
    } 
}(angular)); 

Es ist keine vollständige Lösung für Ihr Problem, aber Sie werden die Idee bekommen;

Die Benutzung ist so etwas wie:

<input type="date" ng-model="yourModel" ms-date>