Angularjs가 입력 마스크를 만듭니다.

Question

입력에 대한 사용자 지정 마스크를 만드는 지시문을 만들려고합니다. 내가 사용할 수있는 다른 라이브러리가 있다는 것을 알고 있지만 때로는 회사 요구 사항 (예 : "OS.012-08765")을 기반으로 사용자 정의 입력이 필요하므로 직접 지시문을 작성해야합니다.

지금까지 필자가 필요로하는 패턴에서 숫자를 형식화 할 수 있었지만 입력에 대해서는 모델에서만 형식을 지정할 수있었습니다. 이 예제에서는 돈 입력을 사용합니다. 작업하기가 더 쉽기 때문입니다 (제 생각 엔). 이것은 내가 사용하는 코드입니다 :

function myMoney() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModelCtrl) { 
      ngModelCtrl.$formatters.push(formatInput); 
      ngModelCtrl.$render = renderViewValue; 
      ngModelCtrl.$parsers.push(parseOutput); 


      function formatInput(value) { 
       value = formatNumber(value); 
       return value; 
      } 
      function parseOutput(value) { 
       value = formatNumber(value); 
       return value; 
      } 
      function renderViewValue() { 
       element.html(ngModelCtrl.$viewValue); 
      } 

      function formatNumber(value) { 
       if(!value) { 
        value = '000'; 
       } 

       var checkValue = value.replace(/[^0-9\.]/g, ''); 
       if(checkValue != value) { 
        value = checkValue; 
       } 

       value = value.toString(); 

       if(value.length < 3) { 
        value = ('000'+value).slice(-3); 
       } 

       var 
        firstChar = value.slice(0, value.length-2), 
        lastChar = value.slice(-2), 
        firstChar = Number(firstChar).toLocaleString(), 
        finalChar = '$'+firstChar+','+lastChar; 

       return finalChar; 
      } 
     } 
    } 
} 

그리고이 코드와 plunkr입니다 : http://plnkr.co/edit/UjZkPFL0V4FRrDUL9jAJ?p=preview

---

가장 큰 문제는 출력이고, 당신이 입력에 입력을 시작하면, 값에는 마스크가 없습니다. 숫자 일뿐입니다. 그러나 모델에는 적절한 마스크가 있습니다.

• 첫째 : 나는이 결과를 반전 할

  그래서,이에 따라, 나는이 개 주요 이슈가있다. 모델이 단지 숫자가 아닌 (마스크없이) 텍스트 상자에 텍스트 상자에 마스크를 입력하고 싶습니다.

• 두 번째 : 모델의 값을 업데이트하는 단추를 만든 경우 마스크 내에서 서식이 지정되지 않고 일반 텍스트로 유지됩니다.

어떻게 이러한 문제를 해결할 수 있습니까?

Answer 1

은 패턴과 일치하는 UI 마스크, https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html를 사용 마스크 정의 필드에서 AA.999-99999를 입력하려고합니다.

<input type="text" 
     ng-model="serviceOrderNumber" 
     ui-mask="AA.999-99999" 
     ui-mask-placeholder 
     ui-mask-placeholder-char="_"/>