Как вы можете ограничить значение из ввода с помощью AngularJS?

Я ищу способы ограничить значение внутри входа 4 и обработать 4-значное значение для моего controllerа.

 {{ search.main | limitTo:4}} 

Всегда можно сделать для него директиву:

 app.directive("limitTo", [function() { return { restrict: "A", link: function(scope, elem, attrs) { var limit = parseInt(attrs.limitTo); angular.element(elem).on("keypress", function(e) { if (this.value.length == limit) e.preventDefault(); }); } } }]);  

Вы всегда можете использовать ng-minlength , ng-maxlength для длины строки и min, max для лимитов числа. Попробуй это

  

DEMO FIDDLE

Я использовал принятый ответ как отправную точку, но это то, что я придумал.

 angular.module('beastTimerApp') .directive('awLimitLength', function () { return { restrict: "A", require: 'ngModel', link: function (scope, element, attrs, ngModel) { attrs.$set("ngTrim", "false"); var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs); scope.$watch(attrs.ngModel, function(newValue) { if(ngModel.$viewValue.length>limitLength){ ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) ); ngModel.$render(); } }); } }; }); 

Применение

  

Ключ должен использовать $ setViewValue () и $ render () для установки и отображения изменений соответственно. Это позволит убедиться, что значения $ viewValue и $ modelValue верны и отображаются правильно. Вы также хотите установить ngTrim в false чтобы пользователь не добавлял лишние пробелы. Этот ответ является объединением ответа @ tymeJV и этого сообщения в блоге … https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/

Будет делать это, позволяя использовать пробелы и удалять.

 app.directive("limitTo", [function() { return { restrict: "A", link: function(scope, elem, attrs) { var limit = parseInt(attrs.limitTo); angular.element(elem).on("keydown", function() { if(event.keyCode > 47 && event.keyCode < 127) { if (this.value.length == limit) return false; } }); } } }]); 

вы можете использовать этот код:

  

и код AngularJS:

 $scope.limitKeypress = function ($event, value, maxLength) { if (value != undefined && value.toString().length >= maxLength) { $event.preventDefault(); } } 

Не нужно использовать директиву AngularJS.

Просто используйте хороший старый стандартный атрибут html maxlength .

  

Вместо этого мы можем использовать значение ng:

 ng-value="(minutes > 60 ? minutes = 0 : minutes)" 

В html-коде:

  

Это будет проверять значение, и если оно больше 60, оно заменяет значение на 0.

Поскольку в вышеприведенной директиве есть проблема (ответ tymeJV). Если вы введете максимальную длину один раз, то он не примет никакого другого символа даже в обратном пространстве. То есть, если limit-to = “4”, и если вы ввели 4 символа в поле ввода, вы не сможете его удалить. Итак, вот обновленный ответ.

 app.directive("limitTo", [function () { return { restrict: "A", link: function (scope, elem, attrs) { var limit = parseInt(attrs.limitTo); elem.bind('keypress', function (e) { // console.log(e.charCode) if (elem[0].value.length >= limit) { console.log(e.charCode) e.preventDefault(); return false; } }); } } }]); 

Мы можем написать директиву для прослушивания события keypress . Но для некоторых старых браузеров это событие не запускается. Вот почему я создал директиву таким образом, что нет никакой зависимости от ограничения событий, связанных с браузером. Я создал угловую директиву, чтобы ограничить количество текста в поле ввода.

 'use strict'; angular.module("appName") .directive("limitTo", [function() { return { restrict: "A", require: "ngModel", link: function(scope, elem, attrs, ctrl) { var limit = parseInt(attrs.limitTo); ctrl.$parsers.push(function (value) { if (value.length > limit){ value = value.substr(0, limit); ctrl.$setViewValue(value); ctrl.$render(); } return value; }); } }}]); 

Использование: допускает только 3 символа в поле ввода.

Запустите эту операцию при любом изменении номера:

 var log = Math.log(number) / Math.log(10); if (log >= 4) number = Math.floor(number / Math.pow(10, Math.ceil(log - 4))); 

Это всегда будет ограничивать «число» до 4 цифр.

Угловой материал имеет директиву mdMaxlength, если вы хотите отрезать вход на этой длине, вы можете использовать эту директиву:

  app.directive("forceMaxlength", [function() { return { restrict: "A", link: function(scope, elem, attrs) { var limit = parseInt(attrs.mdMaxlength); angular.element(elem).on("keydown", function() { if (this.value.length >= limit) { this.value = this.value.substr(0,limit-1); return false; } }); } } }]); 

Применение:

  

Я повторяю, что сказал @ Данило Кобольд.

Я должен был убедиться, что пользователи могут вводить только числа (0-9) [Без ‘e’ или ‘.’ или ‘-‘] и предел только 4 значения.

 app.directive("limitTo", [function() { return { restrict: "A", link: function(scope, elem, attrs) { var limit = parseInt(attrs.limitTo); var exclude = /Backspace|Enter/; angular.element(elem).on("keydown", function(e) { if (event.keyCode > 47 && event.keyCode < 58) { if (this.value.length == limit) e.preventDefault(); } else if (!exclude.test(event.key)) { e.preventDefault(); } }); } } }]); 

Если вы хотите использовать только ограничение, используйте

 app.directive("limitTo", [function() { return { restrict: "A", link: function(scope, elem, attrs) { var limit = parseInt(attrs.limitTo); var exclude = /Backspace|Enter/; angular.element(elem).on("keydown", function(e) { if (!exclude.test(event.key)) { if (this.value.length == limit) e.preventDefault(); } }); } } }]); 

Вы можете добавить дополнительные ключи, если хотите переменную exclude, например:

 var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/; 

Получил идею из этой публикации

Надеюсь, я помог кому-то.

Вы можете просто использовать

 ui-mask="9999" 

как атрибут в вашем представлении.

**

 app.directive("limitTo", [function() { return { restrict: "A", link: function(scope, elem, attrs) { var limit = parseInt(attrs.limitTo); var exclude = /Backspace|Enter/; angular.element(elem).on("keydown", function(e) { if (e.keyCode > 47 && e.keyCode < 58) { if (this.value.length == limit) e.preventDefault(); } else if (!exclude.test(e.key)) { e.preventDefault(); } }); } } }]); 

**

В «Угловом Js-материале» мы можем ограничить поле ввода «maxLimit», например, нам нужен лимит ввода текста, если b 60 символов:

 maxLimit ='60' 

полный код:

  

Используйте эту директиву, если вы хотите ограничить максимальную длину для поля ввода, которое присутствует как часть шаблона настраиваемой директивы. Это собственный способ html5 ограничения max-lenth. Это также будет обрабатывать случай копирования, также ограничивать до maxlength при вставке.

 app.directive('inputWrapper', function() { return { restrict: 'A', template: "" }; }); app.directive('maxInputLength', function() { return { restrict: 'A', link: function(scope, elem, attrs) { var limit = parseInt(attrs.maxInputLength); angular.element(elem).find('input').attr('maxlength', limit); } }; }); 
  
  • Как разрешить ввод только числа (цифры и десятичная точка) на входе?
  • Многоуровневые таблицы (внутри другого при нажатии)
  • Каков наилучший способ условного применения атрибутов в AngularJS?
  • В чем разница между ng-app и data-ng-app?
  • Угловая директива, как добавить атрибут к элементу?
  • Можете ли вы изменить templateUrl на лету?
  • Использование углового фильтра в входном элементе
  • AngularJS - Директивы против controllerов
  • Как реализовать ng-изменение для пользовательской директивы
  • Как понять «терминал» директивы?
  • Как применить директиву AngularJS на основе classа, установленного ng-classом?
  • Давайте будем гением компьютера.