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

问题描述

昨天，我在如何在我的数字字段中创建格式化数字时遇到了问题，但现在我实现了它，我在如何进行计算方面遇到了问题.

index.html

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

app.js

var myApp = angular.module('myApp',['ui.numeric']);angular.module('ui.numeric', []).directive('整数', function() {返回 {要求:'ngModel'，限制:'EACM'，链接:功能(范围，元素，属性，模型Ctrl){范围.$watch(元素，函数(){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();范围.$应用()；});element.bind('焦点', function() {var plainNumber = accounting.unformat(element.val())if(plainNumber == "0") plainNumber = "";modelCtrl.$setViewValue(plainNumber);modelCtrl.$render();范围.$应用()；console.log("我很专注！")});}};});函数 MyCtrl($scope) {$scope.var = {"value":1000.36};}

当字段值小于一千时有效，但当我达到1000时，数字将用逗号1,000格式化，并且它变成字符串并且可以不再做计算.

我想要的只是正确格式化我的数字字段(用于显示)，但保留真实值以进行计算，而无需在每个数字字段中使用单独的变量.

请看小提琴.谢谢！

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

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

解决方案:将 modelCtrl.setViewValue(number) 更改为 modelCtrl.viewValue(number) 以便仅影响显示而不影响实际值(但不确定此解决方法.)

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

感谢大家的帮助！

解决方案

我能想到的唯一解决方案是观察控制器上 {{ 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);调用者(范围，{编号:普通编号})；

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

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

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

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.

Please see the fiddle. Thanks!

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

updated fiddle: http://jsfiddle.net/aldesabido/1syh7cne/14/

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/

Thanks for the help guys!

解决方案

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

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

Example: http://jsfiddle.net/1syh7cne/7/

---

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

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