2014-12-26 3 views
0

Я пытаюсь проверить число в соответствии с его минимальным и максимальным значением через angularJS Это настраиваемая директива, я сначала пробовал с max, которые предоставляют угловую функцию для проверки количества входных данных, она работает со статическим числом, а не с данные привязки. Вот почему я думал о пользовательской директивеПользовательская директива для проверки формы

.directive('ngMax', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, elem, attr, ctrl) { 
     scope.$watch(attr.ngMax, function(){ 
      if (ctrl.$isDirty) 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); 
    } 
}; 
}); 

и в представлении:

<div class="modal-body" > 
    title: {{book.title}}<br> 
    price: {{book.price}}<br> 
    quantity: {{book.nbr_exemplaires}} 
    <form name= "myForm" ng-submit= "addToCart(book, quantity, <%= current_user.id %>)" novalidate > 
     <input type="number" min="1" ng-max="{{book.nbr_exemplaires}}" name= "quantite" ng-model="quantity" required > 
     <span style="color:red" ng-show="myForm.quantite.$error.required"> 
     <span ng-show="myForm.quantite.$error.required">quantity is required!</span> 
     </span> 


    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button class="btn btn-primary" ng-disabled="myForm.$invalid ">Save changes</button> 
    </div> 
    </form> 

Я не мог понять, где проблема

+2

Я буду предупредить вас об использовании префикса «NG»: если вам нужно перейти на angularJS 10.7, кто будет знать, будут ли они реализовывать директиву ngMax? В этом случае вы столкнетесь с некоторыми ошибками. – greenfox

ответ

1

Чтобы избежать X/Y вопросов, когда вы пытаетесь что-то и он не работает, попробуйте обратиться к первому. Это хорошо, что вы предоставили более широкий контекст, поэтому конкретно на ваш вопрос, встроенный max обеспечивает все, что вам нужно:

<input type="number" max="{{max}}" ng-model="foo"> 

и вы можете установить max динамически, например:

$scope.max = 10; 
Смежные вопросы