0

次のような入力があるとします。

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

現在の値は 600.23 です。$scope.myVariable の値は常に 600.23 である必要があります (ユーザーが値を変更しない限り) 入力にフォーカスがない場合は $600.23 を表示する必要がありますが、使用によって入力にフォーカスが与えられた場合は、ユーザーが編集する 600.23 のフォーマットされていない ng-model 値。ユーザーが編集を終了してフォーカスを離したら、表示される値を再び通貨形式にします。基本的に、スプレッドシート アプリケーションで書式設定されたセルがどのように機能するかに似ています。質問を単純にするために、入力検証の必要性を無視してください。

これは jQuery でかなり簡単に実現できますが、純粋な AngularJS で実現できますか?

4

2 に答える 2

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 に答える
0

ngBlurとngFocusを使用して値を切り替えることができます。$ を追加して ngBlur でトリガーする関数を作成し、別の関数を削除してそれを削除します。

于 2013-10-11T18:27:29.187 に答える