입력 요소에서 angularjs 필터 사용

입력 요소에서 angularjs 필터 사용

도코에서 확실한 것을 빠뜨리지 않았으면 좋겠는데, 만약 놓쳤다면 누군가 도와줄 거라고 확신해요.

asp.net webapi를 사용하여 날짜 필드와 함께 DTO를 반환하고 있습니다.이것들은 JSON을 사용해 시리얼화 됩니다.Net(2013-03-11T12:37:38.693' 형식).

필터를 사용하고 싶은데 INPUT 요소에서 이것이 가능한가요? 아니면 이를 위해 새로운 필터나 지시문을 작성해야 하나요?

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

제가 놓치고 있는 지름길이 있나요?

즉, 뷰와 모델에서 데이터를 다르게 표현하려면 양방향 필터로 생각할 수 있는 지시문이 필요합니다.

당신의 지시는 마치

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

다음으로 동작하는 jsFiddle의 예를 나타냅니다.

입력 필드와 모델에서 다른 값을 갖는 것은 ng-model의 본질에 위배됩니다.따라서 가장 간단한 방법을 사용하여 컨트롤러 내부에 필터를 적용할 것을 권장합니다. 포맷된 날짜에는 별도의 변수를 사용하고 포맷된 날짜와 원래 날짜를 동기화하기 위해 워처를 사용할 것을 권장합니다.

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

});

입력에 데이터만 표시되는 경우

정보를 표시하기 위해 실제로 입력이 필요하고 각도 모델을 변경하는 다른 요소가 있으면 더 쉽게 변경할 수 있습니다.

새 지시문을 작성하는 대신 단순히 다음 명령어를 사용하지 마십시오.ng-model그리고 좋은, 오래된 것을 사용한다.value.

그래서 다음 대신:

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

이것으로 끝납니다.

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

그리고 마법처럼 작용한다:)

숫자 형식을 지정하고 마지막부터 시작하여 3자마다 공백을 삽입하는 완전한 예:

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

사용방법:

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

plunkr의 예:

Angular에는 날짜 형식 기능이 내장되어 있지만, 최종적으로 원시(미형식) 날짜를 가져오려는 입력에 적용하려면 사용자 지정 지시문을 만들어야 합니다.

지시의 예:

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

적용 방법:

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

각도에는 날짜 유형에 대한 필터가 이미 내장되어 있으므로 0부터 새 필터를 생성할 필요가 없습니다.http://docs.angularjs.org/api/ng.filter:date

그게 바로 네게 필요한 거라고 생각해.

언급URL : https://stackoverflow.com/questions/15343068/using-angularjs-filter-in-input-element