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

---

主な問題はある出力である場合、あなたが入力に入力を開始すると、値はマスクを持っていない、ちょうど数字です。しかしモデルには適切なマスクがあります。

• まず：私は、これらの結果を反転したい

  ので、これに基づいて、私は主に2つの問題を抱えています。私は、テキストボックスに入力し、モデルが単なる普通の数字（マスクなし）の間に、テキストボックスにマスクを入れたいと思っています。

• 2番目：モデルの値を更新するボタンを作成しても、マスク内でフォーマットされず、プレーンテキストのままです。

どのようにこれらの問題を解決できますか？

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