Question

说我有一个输入：

<input type="text" ng-model="myVariable">

目前的值为600.23。 $ scope.myVariable的值应始终为600.23（除非用户更改值）我希望输入在输入没有焦点时显示$ 600.23，但是当use使用输入焦点时，我希望它切换到用于编辑的未格式化的ng-model值600.23。一旦用户完成编辑并带走焦点，我希望显示的值再次采用货币格式。基本类似于电子表格应用程序中格式化单元格的工作方式。为了简化问题，忽略了输入验证的需要。

这可以通过jQuery轻松完成，但是可以用纯AngularJS来实现吗？

Answer 1

您可以使用ngBlur ang ngFocus来切换值。创建将添加$并在ngBlur上触发它的函数以及另一个将其删除的函数。

Answer 2

这是我创建的依赖于jQuery的解决方案（更糟糕的是，eval！）：

angular.module('app', [])
.directive('displayFormat', function () {
    return function (scope, element, attr) {
        $(element).focus(function () {
            $(this).val(eval('scope.' + $(this).attr('ng-model')));
        });
        $(element).blur(function () {
            var modelValue = parseFloat(eval('scope.' + $(this).attr('ng-model')));
            if (attr["displayFormat"] == 'currency') $(this).val('$' + modelValue.numberFormat(2));
            if (attr["displayFormat"] == 'percentage') $(this).val((modelValue * 100) + '%');
        });
    };
});

Number.prototype.numberFormat = function (decimals, dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.toFixed(decimals).toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);

    return parts.join(dec_point);
}

然后在控制器中：

$scope.$watch(function () {
    $('input').not(':focus').blur();
});

然后输入字段：

<input type="text" ng-model="myVariable" display-format="currency">

（在我的实际应用中，除了货币之外，我将实现显示格式的其他选项）

我真的很想拥有一个非jQuery解决方案。

AngularJS：未聚焦时在输入中显示格式化的模型值

2 个答案: