3

ng-model を使用して入力番号をバインドしようとしています。入力数値が範囲外の場合、ポップアップ ヒントが表示されます。

<input type="number" class="input-number" id="bar-length" value="" ng-model="barLength" min="300" max="650" required>
<div class="input-help">
    <h4>The length is outside the current range of acceptable values.</h4>
</div>

CSS では次のようになります。

/* Help should show when invalid */
.ng-invalid + .input-help {
    display: block;
}

検証は非常にうまく機能します。ただし、単位が「mm」から「in」に変わったときの範囲を変更したいので、JQueryでJavascriptに書きました。

if (units === "in") {
    $("#bar-length").attr("min", 15.75);
    $("#bar-length").attr("max", 31.50);
}

それに応じて ng-model の境界は変わらないようです。入力数値が 15.75 ～ 31.50 の範囲内の場合、ポップアップ ヒントが表示されます。私はこれが初めてで、修正方法がわかりません。私は何をすべきか？

4

1 に答える 1

0

ディレクティブでラップしない限り、jquery を使用しないでください。angularJS の考え方で考えてください。コメントで指摘したように、これはまだ angular によってネイティブにサポートされていませんが、ディレクティブを記述して機能させることができます。

http://jsfiddle.net/g/s5gKC/3/

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

function isEmpty(value) {
  return angular.isUndefined(value) || value === '' || value === null || value !== value;
}

app.directive('ngMin', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMin, function(){
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var minValidator = function(value) {
              var min = scope.$eval(attr.ngMin) || 0;
              if (!isEmpty(value) && value < min) {
                ctrl.$setValidity('ngMin', false);
                return undefined;
              } else {
                ctrl.$setValidity('ngMin', true);
                return value;
              }
            };

            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

app.directive('ngMax', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMax, function(){
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var maxValidator = function(value) {
              var max = scope.$eval(attr.ngMax) || Infinity;
              if (!isEmpty(value) && value > max) {
                ctrl.$setValidity('ngMax', false);
                return undefined;
              } else {
                ctrl.$setValidity('ngMax', true);
                return value;
              }
            };

            ctrl.$parsers.push(maxValidator);
            ctrl.$formatters.push(maxValidator);
        }
    };
});

angular.bootstrap(document.body, ['app']);

編集：制約が変更されたときに検証状態を更新する

于 2013-04-26T17:26:19.480 に答える