AngularJS的貨幣輸入

-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>

來源

2017-09-21 Ivan

所以你試圖直接**交換**十進制和逗號值？爲什麼不簡單使用像'10,000.00'這樣的值？考慮到這是一個直接交換，您可能需要使用第三個值作爲中介。你的腳本目前返回什麼內容，以及哪個部分**特別是**你遇到了什麼問題？ –

在某些國家，貨幣格式爲1.000,00。腳本當前返回輸入字段中的內容。問題是我需要在1000.00格式和輸入1.000,00格式的模型。並且輸入字段只允許數字和逗號輸入 – Ivan

從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。

祝你好運

來源

2017-09-21 22:41:40 Mikechaos

AngularJS的貨幣輸入

回答

相關問題