如果输入值达到{max} AngularJS

时间:2016-08-03 09:07:53

标签: angularjs forms input angularjs-ng-model ng-required

我有一个表格,它包含输入字段,您可以输入金额。它有最大值。如果用户输入的金额大于最大值,我想设置ng-model参数值来设置最大值,这是RESTFull API的响应。

直接将JSON对象值分配给max属性。最大值在字符串中键入,作为API的响应。

我在分配属性值时使用了货币过滤器。

如何将max属性值设置为ngModel对象的值?如果用户输入的值大于最大值?有没有办法可以立即更改它并同时更新输入字段?

另请告诉我,如果我使用过滤器是真的吗?还是不?

<input type="text" name="payableamount" class="form-control input-lg"
                       min="{{amount | currency:'':2}}"
                       max="{{billObj.amount | currency:'':2}}"
                       ng-model="form.bidAmount"
                       ng-required="true" ui-number-mask>

1 个答案:

答案 0 :(得分:1)

存储您从API获得的maxAmount的值,并在&#39; checkAmount&#39;中验证它。功能

1.使用ngKeyup:

//html    
<input ng-model="amount" ng-keyup="checkAmount($event,amount)"/>

//js
function MyCtrl($scope, $log) {

    $scope.checkAmount = function(e,amt) {
      if(amt>10){ //assuming maxAmount is 10
          $scope.amount = 10;
          e.preventDefault();
        }
    };
}

<强> 2。使用指令,

<input check-max ng-model="amount"/>


myApp.directive('checkMax', function() {
    return {
    restrict: 'AE', //attribute or element,
    require: 'ngModel',
    link:function(s,e,a,ngModel){
        e.bind('keyup',function(event){
        if(ngModel.$modelValue>10){
          event.preventDefault();
          ngModel.$setViewValue(10);
          ngModel.$render();
        }
      });
    }
  };
});

小提琴(使用ng-keyup):http://jsfiddle.net/r74a5m25/202/

小提琴(使用指令):http://jsfiddle.net/r74a5m25/203/