1

アプリケーションに、正の整数のみを受け入れる必要があるテキスト フィールドがあります (10 進数も負もありません)。基本的には1～9999までしか入力できないようにしたいです。

<input type="text" min="0" max="99" number-mask="">

これはjsfiddleをグーグルで検索したところ、負の整数を受け入れ、Internet Explorer では機能しませんでした。

私はディレクティブを書いた経験があまりありません。現時点では、角度も学習しています。(typscript を使用して、.net mvc プロジェクトで角度を生成します)

var app = angular.module('myApp', []);

app.directive('numberMask', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).numeric();
        }
    }
});

このコードでネガをチェックすることは可能ですか? 何かのようなもの

if(element <0 && element.lenth > 4)
  .....
else
  ....

前もって感謝します

4

2 に答える 2

3 
angular.module('myapp', [])
.directive('numberMask', function() {
    return function(scope, element, attrs) {
        var min = parseInt(attrs.min, 10) || 0,
            max = parseInt(attrs.max, 10) || 10, 
            value = element.val();
        element.on('keyup', function(e) {
            if (!between(element.val(), min, max)) {
               element.val(value);
            } else {
                value = element.val();
            }
        });

        function between(n, min, max) { return n >= min && n <= max; }
    }
});

http://jsfiddle.net/9HgBY/

于 2013-10-02T04:47:27.347 に答える
1

ng-model の使用をサポートするために Adrians の回答を修正しました。これはおそらく最も美しいコードではありませんが、仕事は完了します。

angular.module('myapp', [])
.directive('numberMask', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {   
            var oldValue = null;
            scope.$watch(attrs.ngModel, function (newVal, oldVal) {
                var min = parseInt(attrs.min) || 0;
                var max = parseInt(attrs.max) || 10;
                if (!between(newVal, min, max)) {
                    if (newVal > max)
                        ctrl.$setViewValue(max);
                    else if (newVal < min)
                        ctrl.$setViewValue(min);
                    else
                        ctrl.$setViewValue(oldValue);
                    ctrl.$render();
                }else{
                    oldValue = newVal;
                }
            }, true);

            function between(n, min, max) { return n >= min && n <= max; }
        }
    };
});

これがエイドリアンのフィドルですhttp://jsfiddle.net/9HgBY/3/

于 2013-11-09T14:03:01.647 に答える