AngularJS格式化數字計算

昨天，我在如何在我的數字字段中設置一個格式化數字時遇到了問題，但現在我實現了它，我在如何計算時遇到了問題。AngularJS格式化數字計算

的index.html

<div ng-controller="MyCtrl"> 
    <input ng-model="var.value" class="integers" symbol="°" /> 
    <br /><br /> 
    {{var.value * 100}} 
</div>

app.js

var myApp = angular.module('myApp',['ui.numeric']); 

angular.module('ui.numeric', []).directive('integers', function() { 
return { 
    require: 'ngModel', 
    restrict: 'EACM', 
    link: function(scope, element, attrs, modelCtrl) { 
     scope.$watch(element, function() { 
      var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v"); 
      modelCtrl.$setViewValue(formatted_number); 
      modelCtrl.$render(); 
     }); 
     element.bind('blur', function() { 

      var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v"); 
      modelCtrl.$setViewValue(formatted_number); 
      modelCtrl.$render(); 
      scope.$apply(); 
     }); 
     element.bind('focus', function() { 
      var plainNumber = accounting.unformat(element.val()) 
      if(plainNumber == "0") plainNumber = ""; 
      modelCtrl.$setViewValue(plainNumber); 
      modelCtrl.$render(); 
      scope.$apply(); 
      console.log("I am focused!") 
     }); 
    } 
}; 
}); 

function MyCtrl($scope) { 
    $scope.var = {"value":1000.36}; 
}

它的工作原理當字段的值不到千元，但是當我到達，該號碼的格式用逗號1,000它變成了字符串，不能再做計算。

我想要的是正確格式化我的數字字段（用於顯示），但保留真正的值做計算，而不使用每個數字字段中的單獨變量。

請看小提琴。謝謝！

http://jsfiddle.net/aldesabido/1syh7cne/6/

更新撥弄： http://jsfiddle.net/aldesabido/1syh7cne/14/

解決方案： 改變modelCtrl.setViewValue（數字）到modelCtrl.viewValue（數），使得顯示僅會受到影響而不是實際的值（但不知道這個解決方法。）。

http://jsfiddle.net/aldesabido/1syh7cne/18/

感謝您的幫助傢伙！

來源

2016-07-03 aldesabido

我能想到的唯一解決方案是觀察控制器上的{{ var.value }}變化：

function MyCtrl($scope) { 
    $scope.var = {"value":1000.36}; 

    $scope.$watch('var.value', function(val) { 
     $scope.numbericVal = accounting.unformat(val); 
    }); 
}

然後，在你看來像這樣使用numericVal：{{numbericVal * 2}}

例子： http://jsfiddle.net/1syh7cne/7/

另一個使用回調函數的RAW例子值被改變： http://jsfiddle.net/1syh7cne/9/

我已經使用屬性來定義一個函數，通過該對象和當前的數值。請注意，您可以解析傳遞對象的val而不是信任函數中的第二個參數。

var invoker = $parse(attrs.updateFunc); 
invoker(scope, {number: plainNumber});

只要看一看 - 我想你會看到我在那裏做了什麼。但正如我所說 - 這是一個可能的解決方案的大方向。

來源

2016-07-03 03:30:34

感謝您的回覆。但我並不想用兩個獨立的變量來顯示和計算。我希望這仍然有辦法。 – aldesabido

我盡力而爲，想不出別的。希望你會找到一個解決方案使用一個變量（這將是一個有趣的） –

感謝您的努力兄弟。在我的所有號碼字段中這樣做都會讓我很痛苦。 – aldesabido

如果您不僅限於使用Angular，還可以查看accounting.js庫，該庫完全符合您的需求。

然後，您還可以在$ scope上保留一個變量，僅用於計算，並且您可以藉助accounting.js格式化來維護var.value和另一個$ scope變量之間的狀態。

我希望這會有所幫助。祝你好運。

來源

2016-07-03 02:47:23 pzelenovic

實際上我使用的是我的格式化accounting.js。我真的不想爲格式化的和原始值使用兩個獨立的變量。 – aldesabido

AngularJS格式化數字計算

回答

相關問題