Для ng-keyup невозможно выполнить event.preventDefault () и ng-keypress отстает от значения для типа ввода номера в angular. js

Question

Проблема: Номер типа ввода с min, max не работает, при вводе в поле ввода мы можем ввести меньше / больше, чем min, max значение. (но стрелкой номера типа ввода он работает нормально.)

Требование: ограничить ввод значения в номере типа ввода, которое не находится в диапазоне min и max

"Используя Angular. js, вы хотите решить эту проблему без дополнительных указаний и без изменения номера типа ввода на текст." Плункер

ng-keyup: невозможно выполнить event.preventDefault () почему? Вот почему мы можем ввести больше / меньше, чем минимальное или максимальное значение. Я получаю правильное значение при изменении.

ng-keypress: отстает от 1 значения. Итак, первое значение не определено (это проблема для моего вопроса). Я могу сделать event.preventDefault ();

Должен быть: ng-keyup с event.preventDefault (); или ng-keypress в правильном порядке

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myScore;
    $scope.limit = function(event, myScore){
       console.log(event, $scope.myScore, myScore);
       // do your code here myScore should be between (min-max)
       event.preventDefault(); 

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<!-- <input type="number" ng-model="myScore" min="0" max="200" ng-keypress="limit($event, myScore)"> -->

<input type="number" ng-model="myScore" min="0" max="200" ng-keyup="limit($event, myScore)">
{{myScore}}


</div>

Answer 1

Попробуйте использовать предыдущее значение для возврата к. Тогда, поскольку $scope.myScore будет undefined всякий раз, когда ему присваивается значение, которое выходит за пределы того, что разрешено вашим input, проверьте это в своем IF.

HIH

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

app.controller('myCtrl', function($scope) {
  $scope.limit = function(e) {
    console.log( $scope.prevScore,$scope.myScore)
    if ($scope.myScore === undefined){
      $scope.myScore = $scope.prevScore
    }
    
    $scope.prevScore = $scope.myScore;
 }
 
 $scope.forInitialValue = function(e) {
    if ($scope.myScore === undefined){
      $scope.myScore = ""
    }
    
    $scope.prevScore = $scope.myScore;
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="myScore" min="0" max="200" ng-change="limit($event)" ng-keydown="forInitialValue($event)"> {{myScore}}
</div>

Answer 2

Вы можете сделать это, установив min, max в контроллере и используя ng-change:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.min = 0;
  $scope.max = 200;
  $scope.limit = function() {
    if ($scope.myScore > $scope.max) $scope.myScore = $scope.max
    if ($scope.myScore < $scope.min) $scope.myScore = $scope.min
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="myScore" min="min" max="max" ng-change="limit()"> {{myScore}}
</div>