En utilisant angularjs filtre dans l'élément d'entrée

Question

J'espère que je n'ai pas oublié quelque chose d'évident dans le doco, si j'ai, je suis sûr que quelqu'un va l'aider.

Je suis à l'aide d'asp.net webapi pour retourner un DTO, avec des champs de date. Ces sont en série à l'aide de JSON.Net (en format '2013-03-11T12:37:38.693').

Je voudrais utiliser un filtre, mais dans un élément d'ENTRÉE, est-ce possible ou dois-je créer un nouveau filtre ou de la directive pour accomplir cette?

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

Est-il un raccourci que je suis absent?

Answer 1

En bref: si vous voulez que vos données ont 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 une deux-voies filtre.

Votre directive devrait ressembler à quelque chose comme

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

Answer 2

Avoir des valeurs différentes dans votre champ de saisie et dans la votre modèle va à l'encontre de la nature même de ng-model. Donc, je vous suggère de prendre l'approche la plus simple et appliquez votre filtre à l'intérieur du contrôleur, en utilisant une variable distincte pour la date formatée, et en employant les observateurs de la garder en forme et les dates originales de synchronisation:

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

});

Answer 3

Exemple complet qui formate les nombres, l'insertion d'espaces tous les 3 caractères, en commençant par la fin:

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

Utilisation:

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

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

Answer 4

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

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