2017-09-21 8 views
-2

私は、通貨が「。」で分けられている通貨の入力をしようとしています。小数は "、"例:1.000,00で分かれています。そしてそれは入力フィールドに表示されるべきですが、モデルは1000.00のようにすべきです。私たちはモデル値を持っている場合、それは1.000,00と表示されなければならない、と存在しない場合には、これまでのところ、私はこのような何かしている空とどまることができる:AngularJSの通貨入力

// Code goes here 
 

 
var app = angular.module("myApp", []); 
 

 
app.controller("myController", function ($scope) { 
 
    $scope.amount = 12548.12 
 

 
}); 
 
app.directive('smartFloat', function() { 
 
    return { 
 
      controller($scope) { 
 

 
      }, 
 
      require: 'ngModel', 
 
      restrict: 'A', 
 
      link: function (scope, element, attr, ngModel) { 
 
       function inputValue() { 
 
        var inputVal = element.val(); 
 
        var res; 
 
        
 

 
        //clearing left side zeros 
 
        while (inputVal.charAt(0) == '0') { 
 
         inputVal = inputVal.substr(1); 
 
        } 
 

 
        inputVal = inputVal.replace(/[^\d.\',']/g, ''); 
 

 
        var point = inputVal.indexOf(","); 
 
        if (point >= 0) { 
 
         inputVal = inputVal.slice(0, point + 3); 
 
        } 
 

 
        var decimalSplit = inputVal.split(","); 
 
        var intPart = decimalSplit[0]; 
 
        var decPart = decimalSplit[1]; 
 

 
        intPart = intPart.replace(/[^\d]/g, ''); 
 
        if (intPart.length > 3) { 
 
         var intDiv = Math.floor(intPart.length/3); 
 
         while (intDiv > 0) { 
 
          var lastComma = intPart.indexOf("."); 
 
          if (lastComma < 0) { 
 
           lastComma = intPart.length; 
 
          } 
 

 
          if (lastComma - 3 > 0) { 
 
           intPart = intPart.slice(0, lastComma - 3) + "." + intPart.slice(lastComma - 3); 
 
          } 
 
          intDiv--; 
 
         } 
 
        } 
 

 
        if (decPart === undefined) { 
 
         decPart = ""; 
 
        } 
 
        else { 
 
         decPart = "," + decPart; 
 
        } 
 
        if (intPart == "" && decPart != "") { 
 
         intPart = 0; 
 
        } 
 
        if (intPart == "" && decPart == "") { 
 
         res = null; 
 
        } else { 
 
         res = intPart + decPart; 
 
        } 
 

 
        if (res != inputValue) { 
 
         ngModel.$setViewValue(res); 
 
         ngModel.$render(); 
 

 
        } 
 
        return res 
 

 
       } 
 
        //from model to view 
 
        ngModel.$parsers.push(inputValue); 
 

 

 
       ngModel.$formatters.push(function(val){ 
 
        return val 
 
       }); 
 

 

 

 
      } 
 
     }; 
 

 
    })
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.6.1" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div ng-app="myApp"> 
 
     <div ng-controller="myController"> 
 
      <input type="text" class="form-control" id="inputAmount" name="inputAmount" placeholder="Amount" ng-model="amount" smart-float /> 
 

 
      <span class="help-block" ng-show="myForm.inputAmount.$error.float"> 
 
       Invalid Amount! 
 
      </span> 
 
    {{amount}} 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

+0

小数点4桁とカンマの値を直接交換しようとしていますか?単に '10,000.00'のような値を使うのはなぜですか?それが直接的なスワップだと考えれば、おそらく仲介者として第3の価値を使う必要があります。あなたのスクリプトは現在何を返していますか?**特に**あなたは問題を抱えていますか? –

+0

一部の国では、通貨は1.000,00のように書式設定されています。スクリプトは現在、入力フィールドにあるものを返します。問題は、1000.00の方法で、入力1.000,00のモデルでフォーマットが必要なことです。また、入力フィールドでは数字とカンマの入力だけが可能です – Ivan

答えて

0

hereから撮影と適応します:

function commafy(num) { 
 
    var str = num.split('.'); 
 
    if (str[0].length >= 2) { 
 
     str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1.'); 
 
    } 
 

 
    return str.join(','); 
 
} 
 

 
console.log(commafy('1000.00')); 
 
console.log(commafy('1230154.27'));

次に、あなたのこの関数を使用して番号をレンダリングする必要がありますが、モデルには実際の1000.00または1230154.27のままにしておく必要があります。

幸運

関連する問題