AngularJS格式化数字计算 [英] AngularJS formatted number calculation

问题描述

昨天，我在如何在我的号码字段中创建格式化数字时遇到问题，但是现在我实现了它，我对如何进行计算有疑问。

Yesterday, I am having trouble on how to make a formatted number in my number fields but now that I achieve it, I am having problem on how to do the calculation.

index.html

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

当字段的值小于一千但是当我达到 1000 时，数字将使用逗号 1,000 进行格式化，并且它将变为字符串，无法再进行计算。

It works when the value of the field is less than a thousand but when I reach 1000, the number would be formatted with comma 1,000 and it becomes string and can't do anymore calculations.

我想要的只是正确格式化我的数字字段（用于显示），但保留真值以进行计算而不在每个数字字段中使用单独的变量。

All I want is to properly format my number fields(for display) but retain the true value to do calculations without using separate variable in each number field.

请看小提琴。谢谢！

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

更新小提琴：
http://jsfiddle.net/aldesabido/1syh7cne/14/

解决方案：
将modelCtrl.setViewValue（数字）更改为modelCtrl.viewValue（数字），以便仅显示影响而不影响实际值（不确定此变通方法。）。

Solution: changed the modelCtrl.setViewValue(number) to modelCtrl.viewValue(number) so that the display only will be affected not the actual value (not sure about this workaround though.).

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

感谢帮助人员！

推荐答案

唯一的解决方案我能想到的是在控制器上观察 {{var.value}} 的变化：

The only solution I can think of is to watch for changes in {{ var.value }} on the controller:

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

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

然后，使用 numericVal 在您的视图中： {{numbericVal * 2}}

And then, use numericVal in your view like this: {{numbericVal * 2}}

示例：
< a href =http://jsfiddle.net/1syh7cne/7/ =nofollow> http://jsfiddle.net/1syh7cne/7/

每当值发生变化时使用回调函数的另一个RAW示例：
http://jsfiddle.net/1syh7cne/9/

Another RAW example that using callback function whenever the value gets changed: http://jsfiddle.net/1syh7cne/9/

我使用这些属性来定义一个传递的函数对象和当前数值。请注意，您只需解析传递的对象的 val ，而不是信任函数中的第二个参数。

I've used the attributes to define a function that pass the object and the current numeric value. Note that you can just parse the val of the passed object instead of trusting the second parameter in the function.

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

看看 - 我想你会看到我在那里做了什么。但正如我所说 - 这是一个可能的解决方案的总体方向。

Just take a look - I think you'll see what I did there. But as I said - It's a general direction for a possible solution.

这篇关于AngularJS格式化数字计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！