javascript - AngularJS格式化数字计算

Question

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

index.html

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

应用程序.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并且它变成字符串并且可以'做更多的计算。

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

请看 fiddle 。谢谢!

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

更新的 fiddle : http://jsfiddle.net/aldesabido/1syh7cne/14/

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

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

谢谢大家的帮助!

Answer 1

我能想到的唯一解决方案是观察 Controller 上 {{ var.value }} 的变化:

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

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

然后，在您的 View 中使用 numericVal，如下所示:{{numbericVal * 2}}

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

---

另一个在值改变时使用回调函数的 RAW 示例: http://jsfiddle.net/1syh7cne/9/

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

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

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