0

假设我有这样的输入：

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

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

这可以用 jQuery 很容易地完成，但是用纯 AngularJS 可以做到吗？

4

2 回答 2

0

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

于 2013-10-11T18:27:29.187 回答
0

这是我创建的依赖于 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 解决方案。

于 2013-10-11T19:31:01.317 回答