Utilisation du filtre angularjs dans l’élément d’entrée

J’espère que je n’ai rien manqué de évident dans le documentaire, si j’en ai, je suis sûr que quelqu’un aidera.

J’utilise asp.net webapi pour renvoyer un DTO, avec des champs de date. Ceux-ci sont sérialisés à l’aide de JSON.Net (au format ‘2013-03-11T12: 37: 38.693’).

J’aimerais utiliser un filtre mais dans un élément INPUT, est-ce possible ou devrais-je créer un nouveau filtre ou une nouvelle directive pour y parvenir?

// this just displays the text value  // this doesn't work at all  // this works fine {{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}} 

Y a-t-il un raccourci qui me manque?

En bref: si vous souhaitez que vos données aient une représentation différente dans la vue et dans le modèle, vous aurez besoin d’une directive , que vous pouvez considérer comme un filtre bidirectionnel .

Votre directive ressemblerait à quelque chose

 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:

  

Voici un exemple fonctionnel de jsFiddle .

Avoir des valeurs différentes dans votre champ de saisie et dans votre modèle va à l’encontre de la nature même de ng-model. Je vous suggère donc d’adopter l’approche la plus simple et d’appliquer votre filtre à l’intérieur du contrôleur, en utilisant une variable distincte pour la date formatée et en employant des observateurs pour synchroniser les dates d’origine et de formatage:

HTML:

  

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

Si votre entrée affiche uniquement des données

Si vous avez réellement besoin d’une entrée pour simplement afficher certaines informations et que c’est un autre élément qui modifie le modèle angular, vous pouvez effectuer un changement plus facile.

Au lieu d’écrire une nouvelle directive, n’utilisez PAS le ng-model et utilisez une value correcte.

Donc au lieu de:

  

Cela fera:

  

Et fonctionne comme un charme 🙂

Exemple complet qui met en forme les nombres, en insérant des espaces tous les 3 caractères, à partir de la fin:

 'use ssortingct' Ssortingng::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.toSsortingng() input.reverse().replace(/(.{3})/g, '$1 ').reverse() modelCtrl.$parsers.push (input) -> return unless input? input.replace(/\s/g, '') 

Usage:

  

Exemple Plunkr: http://plnkr.co/edit/qo0h9z

Angular a intégré une fonctionnalité de format de date , mais pour l’appliquer à une entrée où vous aimerez éventuellement obtenir la date brute (non formatée), vous devez créer une directive personnalisée.

Exemple de directive:

 (function () { 'use ssortingct'; angular.module('myApp').directive('utcDate', ['$filter', function ($filter) { return { ressortingct: 'A', //ressortingcting to (A)tsortingbutes 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; }); } }; }]); })(); 

Ensuite, pour l’appliquer:

  

Vous n’avez pas besoin de créer un nouveau filtre à partir de zéro, car angular a déjà un filtre intégré pour les types de date. http://docs.angularjs.org/api/ng.filter:date

Je crois que c’est exactement ce dont vous avez besoin.