Pregunta Usar el filtro angularjs en el elemento de entrada


Espero no haberme perdido nada obvio en el doco, si lo estoy, estoy seguro de que alguien ayudará.

Estoy usando asp.net webapi para devolver un DTO, con campos de fecha. Estos se serializan usando JSON.Net (en formato '2013-03-11T12: 37: 38.693').

Me gustaría utilizar un filtro, pero en un elemento INPUT, ¿es posible o debo crear un nuevo filtro o directiva para lograr esto?

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

¿Hay algún atajo que me falta?


73
2018-03-11 15:57


origen


Respuestas:


En resumen: si desea que sus datos tengan una representación diferente en la vista y en el modelo, necesitará una directiva, que puedes pensar como filtro bidireccional.

Su directiva sería algo así como

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

Aquí hay un trabajo jsFiddle ejemplo.


131
2018-03-11 18:49



Tener diferentes valores en su campo de entrada y en su modelo va en contra de la naturaleza misma de ng-model. Así que te sugiero que tomes el enfoque más simple y apliques tu filtro dentro del controlador, usando una variable separada para la fecha formateada, y empleando observadores para mantener las fechas formateadas y originales sincronizadas:

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

});

20
2018-03-11 19:05



Si su entrada solo muestra datos

Si realmente necesita una entrada para simplemente monitor algo de información y es algún otro elemento que cambios el modelo angular puede hacer un cambio más fácil.

En lugar de escribir nuevas directivas simplemente NO UTILICE el ng-model y usa bueno, viejo value.

Entonces, en lugar de:

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

Esto lo hara:

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

Y funciona como un encanto :)


16
2017-09-10 15:13



Ejemplo completo que formatea números, inserta espacios cada 3 caracteres, empezando por el final:

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

Uso:

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

Ejemplo de Plunkr: http://plnkr.co/edit/qo0h9z


3
2017-09-19 06:44



Angular ha incorporado formato de fecha funcionalidad, pero para aplicarlo a una entrada en la que eventualmente desea obtener la fecha sin formato (sin formatear), debe crear una directiva.

Ejemplo de Directiva:

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

Entonces para aplicarlo:

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

0
2018-04-09 19:50



No es necesario crear un nuevo filtro desde cero, ya que angular ya tiene un filtro incorporado para los tipos de fecha. http://docs.angularjs.org/api/ng.filter:date

Creo que eso es exactamente lo que necesitas.


-3
2018-03-11 16:26