입력 요소에서 angularjs 필터 사용

입력 요소에서 angularjs 필터 사용

---

doco에서 분명한 것을 놓친 적이 없었습니다. 만약 누군가가 도움을 줄 확신합니다.

날짜 필드가있는 DTO를 반환하기 위해 asp.net webapi를 사용하고 있습니다. 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 예제입니다.

---

입력 필드와 모델에있는 다른 값을 입력하십시오. 가장 간단한 접근 방식을 취하고 형식이 지정된 날짜에 대해 별도의 변수를 사용하고 형식이 지정된 날짜와하는 것이 좋습니다 날짜를 동기화 상태로 유지하기 위해 감시 보안 고용하여 컨트롤러 내부에 필터를 적용합니다.

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

});

---

입력이 데이터 만 표시하는 경우

실제로는 일부 정보 를 표시 하기 위해 입력이 필요 하고 Angular 모델 을 변경 하는 다른 요소가있는 방법을 사용할 수 있습니다.

지시문을 작성 새하는 대신 단순히를 사용하지 말고 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 예 : http://plnkr.co/edit/qo0h9z

---

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

---

angular에는 이미 날짜 유형에 대한 기본 제공 필터가 있으므로 0에서 새 필터를 만들 필요가 없습니다. http://docs.angularjs.org/api/ng.filter:date

나는 그것이 정확히 당신이 필요하다고 믿는다.

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