角，與金錢格式的貨幣面具指令在飛行

Question

我試圖創建使用http://jquerypriceformat.com/

所以在我的指令遠一個歐盟貨幣領域的輸入掩碼輸入框，輸入正確顯示的但我相信有什麼不對，因爲POST值是用奇怪的格式發送的，與我們在輸入字段中看到的完全不同。

我包括priceformat.js

<script src="js/jquery.price_format.1.8.min.js"></script> 

<input type="text" currency-input ng-model...> 

而就角：

app.directive('currencyInput', function() { 
    return { 
     require: '?ngModel', 
     link: function($scope, element, attrs, controller) { 
     element.priceFormat({ 
      prefix: '', 
      centsSeparator: ',', 
      thousandsSeparator: '.' 
     }); 
     } 
    }; 
}); 

我的輸入正確地顯示與掩模的值，但在POST數據（由角稱爲）它是一個不同的價值，我錯過了什麼？

輸入> 2.200,80 | post> 22,0080

謝謝

Answer 1

從你的例子我看不到該鏈接返回的東西。

我會寫指令類似：

.directive('format', ['$filter', function ($filter) { 
    return { 
     require: '?ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      if (!ctrl) return; 


      ctrl.$formatters.unshift(function (a) { 
       return $filter(attrs.format)(ctrl.$modelValue) 
      }); 


      ctrl.$parsers.unshift(function (viewValue) { 

      elem.priceFormat({ 
      prefix: '', 
      centsSeparator: ',', 
      thousandsSeparator: '.' 
     });     

       return elem[0].value; 
      }); 
     } 
    }; 
}]); 

演示1 Fiddle

如果你想在啓動消防過濾器，使用$formatters：

現在link是：

link: function (scope, elem, attrs, ctrl) { 
      if (!ctrl) return; 

      var format = { 
        prefix: '', 
        centsSeparator: ',', 
        thousandsSeparator: '' 
       }; 

      ctrl.$parsers.unshift(function (value) { 
       elem.priceFormat(format); 

       return elem[0].value; 
      }); 

      ctrl.$formatters.unshift(function (value) { 
       elem[0].value = ctrl.$modelValue * 100 ; 
       elem.priceFormat(format); 
       return elem[0].value; 
      }) 
     } 

演示2 Fiddle

Answer 2

推一個$parser到控制器，且當它不使用$setViewValue()和$render()輸入僅匹配更新值。

app.directive('currencyInput', function() { 
    return { 
     require: '?ngModel', 
     link: function($scope, element, attrs, controller) { 
     return ctrl.$parsers.push(function(inputValue) { 

      ... 

      if (result != inputValue) { 
       controller.$setViewValue(res); 
       controller.$render(); 
      } 
     }); 
     } 
    }; 
}); 

這裏有我用我的貨幣輸入指令的邏輯小提琴：我喜歡它的簡單和優雅的Dubilla的做法事業Fiddle

Answer 3

。我決定添加（有適當的信用）一些功能，以使其與真實世界的用例非常接近。

我已經在github項目上使用它來創建一些有用的財務指令github。

顯着的額外功能：

1. 它的投入一些嚴格的檢查，以提供有效的響應。
2. 它有一些鍵盤快捷鍵可以使輸入大量數字更快。
3. 我演示瞭如何將它與bootstrap和ngmodel css更新集成。
4. 作爲獎勵，我outputed形式的ngmonel爲JSON，以幫助人們看到的表單驗證如何在實時

它還使用POJO作爲ngmodel：

function Money() { 
    this.notional = 0; 
    this.maxValue = 99999999999.9; 
    this.maxValueString = "99,999,999,999.9"; 
    this.maxPrecision = 10; 
} 

可以使用它與Bootstrap 3是這樣的：

<h1>Currency Formatting directive</h1> 

<div class="row"> 

    <div class="col-md-6"> 
     <form name="myForm"> 

      <div class="form-group" ng-class="{'has-error': myForm.notional.$invalid && myForm.notional.$touched}"> 
       <input type="text" ng-model="myForm.money.notional " money="money" money-input size="30" required 
         name="notional" 
         class="form-control" 
         placeholder="Enter notional amount"/> 

         <p class="help-block error" ng-show="myForm.notional.$error.required && myForm.notional.$touched">Required</p> 



      </div> 

      <button ng-disabled="myForm.$invalid" type="submit">SAVE</button> 
     </form> 
     <h2>Tips</h2> 
     <ol> 

      <li> Entering 'k' will multiply the amount by one thousand</li> 
      <li> Entering 'm' will multiply the amount by one million</li> 
      <li> Entering 'b' will multiply the amount by one billion</li> 
     </ol> 
    </div> 
</div> 
<p>Form debugger</p> 
<pre> 
       form = {{ myForm | json }} 
    </pre> 

Answer 4

遲到派對，但我相信這值得另一個答案！我一直在使用ng-currency模塊。這絕對是太棒了。

Answer 5

這裏有一種方法來處理這個沒有jQuery只使用Angular指令。這個例子不支持小數。很容易修改它以支持該功能，只需更改toView()函數中的$filter即可。

在我看來，這是一個更好的方法來解決同樣的問題，因爲你可以避免加載jQuery和作者提到的貨幣插件。使用$locale屬性支持歐元的語言環境支持，但我只測試了這個在美元中使用。

(function() { 
 
    var app = angular.module('currencyMask', []); 
 

 
    // Controller 
 
    app.controller('ctrl', ['$scope', function($scope) { 
 
    $scope.amount = 100000; 
 
    }]); 
 

 
    // Directive 
 
    app.directive('inputCurrency', ['$locale', '$filter', function($locale, $filter) { 
 

 
    // For input validation 
 
    var isValid = function(val) { 
 
     return angular.isNumber(val) && !isNaN(val); 
 
    }; 
 

 
    // Helper for creating RegExp's 
 
    var toRegExp = function(val) { 
 
     var escaped = val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); 
 
     return new RegExp(escaped, 'g'); 
 
    }; 
 

 
    // Saved to your $scope/model 
 
    var toModel = function(val) { 
 

 
     // Locale currency support 
 
     var decimal = toRegExp($locale.NUMBER_FORMATS.DECIMAL_SEP); 
 
     var group = toRegExp($locale.NUMBER_FORMATS.GROUP_SEP); 
 
     var currency = toRegExp($locale.NUMBER_FORMATS.CURRENCY_SYM); 
 

 
     // Strip currency related characters from string 
 
     val = val.replace(decimal, '').replace(group, '').replace(currency, '').trim(); 
 

 
     return parseInt(val, 10); 
 
    }; 
 

 
    // Displayed in the input to users 
 
    var toView = function(val) { 
 
     return $filter('currency')(val, '$', 0); 
 
    }; 
 

 
    // Link to DOM 
 
    var link = function($scope, $element, $attrs, $ngModel) { 
 
     $ngModel.$formatters.push(toView); 
 
     $ngModel.$parsers.push(toModel); 
 
     $ngModel.$validators.currency = isValid; 
 

 
     $element.on('keyup', function() { 
 
     $ngModel.$viewValue = toView($ngModel.$modelValue); 
 
     $ngModel.$render(); 
 
     }); 
 
    }; 
 

 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     link: link 
 
    }; 
 
    }]); 
 
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 

 
<div ng-app="currencyMask" ng-controller="ctrl"> 
 
\t <input input-currency ng-model="amount"> 
 
\t <p><strong>Amount:</strong> {{ amount }}</p> 
 
</div>