AngularJS - 입력시 텍스트 필터에 통화 필터를 적용하는 방법은 무엇입니까?

Question

프로젝트에 금액 필드를 통화 형식으로 표시해야합니다. 이 onblur 이벤트를 얻을 수는 있지만 필터 나 다른 AngularJS 기술을 사용하여이 작업을 수행 할 수 있는지 알려주십시오.

<input type="text" class="form-control" id="MyAmount" name="MyAmount" ng-model="MyAmount" /> 

내가 통화 형식에 따라이 텍스트 상자 안에 값을 변환 할 :

나는 다음과 같은 텍스트 상자가 있습니다. 200,000을 입력하면 타이핑하는 동안 또는 타이핑하는 동안 $ 200,000.00이됩니다.

는 I는 다음의 기술을 사용하고, 필터

<input type="text" class="form-control" id="MyAmount" name="MyAmount" ng-model="MyAmount" 
          value="{{MyAmount | currency}}" /> 

적용하지만 $ 2.00 2 변환 I가 발견 추측으로 그 때 (값을 클리어 같은 단지, I 입력 첫번째 키 변환 이 업데이트 된 값이 아닌 숫자입니까?)

업데이트 : 맞춤 필터를 사용하여 실시간으로 형식을 지정할 수 있지만 모든 경우에 해당 필터가 제대로 작동하지 않으며 값을 저장하면 값이 표시됩니다. 숫자 값뿐만 아니라 양과 쉼표. 나는 더 많이 시도 할 것이다.

Answer 1

다소 사소한 문제입니다. 기능의 주요 부분 인 경우 $modelValue 및 $viewValue의 변경 사항을 처리하기 위해 리스너를 등록하려면 ngModelController의 $formatters 및 $parsers 속성을 각각 사용해야합니다.

1. 는 $modelValue 변경, 당신은보기에 표시하기 전에 currency 필터를 사용하여 필터링해야합니다.

2. $viewValue이 변경되면 숫자로 변환해야합니다 (모델 값을 형식화 된 문자열이 아닌 숫자로 저장하는 것이 더 효과적이라고 생각 함) currency 필터를 통해 해당 숫자를 필터링하고 $viewValue (필요한 경우).

특히 그리 어렵지 않습니다. 까다로운 부분은 요소의 값을 업데이트하고 끝에서 커서를 이동하므로 수동으로 캐럿을 다시 배치해야한다는 것입니다.

내 시도는 다음과 같은 지침 정의 개체

{ 
    restrict: 'A', 
    require: 'ngModel', 
    link: function postLink(scope, elem, attrs, modelCtrl) {  
    modelCtrl.$formatters.push(filterFunc); 
    modelCtrl.$parsers.push(function (newViewValue) { 
     var newModelValue = toNumber(newViewValue); 
     modelCtrl.$viewValue = filterFunc(newModelValue); 
     var pos = getCaretPosition(elem[0]); 
     elem.val(modelCtrl.$viewValue); 
     var newPos = pos + modelCtrl.$viewValue.length - 
         newViewValue.length; 
     setCaretPosition(elem[0], newPos); 
     return newModelValue; 
    }); 
    } 
}; 

, 또한,이 short demo 페이지의 결과. 완벽하지는 않지만 좋은 출발점입니다. 나는 AngularUI의 uiMask 지시문에서 get/setCaretPosition() 함수를 "빌려"왔습니다.

Answer 2

fcsa-number 지시문을 사용하여 자동으로 제공 할 수도 있습니다. 입력 요소에 fcsa-number 속성을 추가하는 것만 큼 쉽습니다.

<input type="text" fcsa-number /> 

그리고 here is a demo

소스 코드 및 설명서 GitHub에 볼 수 있습니다 : 시도는 사용자 정의 통화 지시어를 구축 할 때

Answer 3

https://github.com/FCSAmericaDev/angular-fcsa-number 내가 같은 문제가 있습니다. 그래서 여러 가지 방법으로 해결할 수 있는지 확인한 후에 angular-input-masks 지시어를 찾았습니다.

<input type="text" ng-model="money" ui-money-mask> 

또한 분을 지원하고 최대 검증 값 : 빠른 설치를위한

지원 심정과는 입력 텍스트 요소의 UI 돈 마스크 속성을 추가 할 만 한 사용할 수 있습니다.