Angularjs function call when entering text by length

Question

I have a text box. I would like to call the method inside the controller only when the user has filled in 'n' or more characters in the text box.

Can someone please give me pointers on how to approach this?

thanks

Answer 1

Id recommends using ngChange and binding to the evaluation function. Below is an example

angular.module('inputChange', []) .controller('TextInputController', ['$scope', function ($scope) { var inputMin = 3; $scope.someVal = ''; $scope.result = ''; $scope.textChanged = function() { if ($scope.someVal.length >= inputMin) executeSomething() else $scope.result = ''; }; function executeSomething() { $scope.result = $scope.someVal; }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="inputChange" ng-controller="TextInputController"> <input type="text" ng-model="someVal" ng-change="textChanged()" ng-Trim="false" /> <br /> someVal: <span ng-bind="someVal"></span> <br /> Result: <span ng-bind="result"></span> <br /> someVal Length: <span ng-bind="someVal.length"></span> <br /> Result Length: <span ng-bind="result.length"></span> </div> 

Answer 2

You could just achieve this using the ng-keyup

 ng-keyup="(1myNgModel.length >= n) && myFunction()" 

The desired function will be called only if the length of the model is greater than n length

Working plunkr

---

Although the best version will have ng-model-options with debounce time to reduce the number of changes. After that, we can easily use the ng-change directive for the fire function.

 <input type="text" ng-model="myNgModel" ng-change="(myNgModel.length >= 3) && myFunction()" ng-model-options="{ debounce: 200 }" /> 

Updated demo

Answer 3

You can add directive to the element and $watch for model changes. Then you can run whatever logic you want when your model has changed and matters. In this case, call our expression model. The following is an example for the <textarea> element. This approach can also be used for the <input /> element.

 <textarea watcher ng-model="expression"></textarea> 

---

 app.directive('watcher', [function () { return { restrict: 'A', link: function (scope, elem, attrs) { scope.$watch(attrs.ngModel, function (v) { if(v) { // you have a value } else { // no value } }); } } }]); 

JSFiddle example

Answer 4

A good way to do this is to use the directive. Here's how to do it:

View:

 <div ng-app="foo" ng-controller="fooController"> <textarea text-length-handler="doThing()" text-length="6" ng-model="text"> </textarea> </div> 

JS:

 angular.module('foo', []) .directive('textLength', function(){ return { restrict: 'A', require: 'ngModel', scope: { textLengthHandler: '&' }, link: function ($scope, $element, $attrs, ctrl) { var limit = parseInt($attrs.textLength); var handler = function(){ if (ctrl.$modelValue.length >= limit) { $scope.textLengthHandler() } }; $element.on('keypress', handler); // remove the handler when the directive disappears $scope.$on('destroy', function(){ $element.off('keypress', handler) }); } } }) 

Spell here:

http://jsfiddle.net/dtq0mz8m/

Answer 5

If you bind an input field to a variable using ngModel, you can watch it from the controller (albeit not very elegantly) using $ watch or $ watch with each change and check the length.