Question

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

的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 格式化，并且它将成为字符串并且可以＆＃39;不再做计算了。

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

请看小提琴。谢谢！

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

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

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

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

感谢帮助人员！

Answer 1

我能想到的唯一解决方案是监视控制器上{{ 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});

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

Answer 2

如果您不仅限于使用Angular，您可以查看accounting.js库，它可以完全满足您的需求。

然后您还可以在$ scope上保留一个变量，仅用于计算，并且在您使用accounting.js帮助格式化var.value和其他$ scope变量之间的状态。

我希望这会有所帮助。祝你好运。

AngularJS格式化数字计算

2 个答案: