Вызов функции angularjs при вводе текста по длине

Question

У меня есть текстовое поле. Я хотел бы вызвать метод внутри контроллера только тогда, когда пользователь заполнил 'n' или большее количество символов в текстовом поле.

Может кто-нибудь, пожалуйста, дайте мне указания на то, как подойти к этому?

Благодаря

Answer 1

Id рекомендуют просто использовать ngChange и привязку к функции оценки. Ниже приведен пример

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

Вы могли бы просто добиться этого с помощью ng-keyup директивы

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

Желаемая функция только вызывается только тогда, когда длина модели больше равна n длине

Working Plunkr

---

Хотя лучшая версия будет иметь ng-model-options с debounce времени, так что это уменьшит количество изменений стоимости. После этого мы сможем легко использовать директиву ng-change для функции огня.

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

Updated Demo

Answer 3

Если связать поле ввода переменной с помощью ngModel, вы можете посмотреть его от контроллера (не очень элегантно, хотя), используя $ часы или $ наблюдать всякий раз, когда она меняется, и проверьте длину.

Answer 4

Вы можете добавить директиву в свой элемент и $watch для изменения модели. Затем вы можете запускать любую логику, которую хотите, когда ваша модель изменилась и имеет значение. В этом случае позвоните по нашей модели expression. Вот пример для элемента <textarea>. Этот подход может быть также использован для элемента <input />.

<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 5

Хороший способ сделать это состоит в использовании директивы. Вот как это можно сделать:

вид:

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

ЯШ:

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) 
      }); 
     } 
    } 
}) 

Fiddle здесь:

http://jsfiddle.net/dtq0mz8m/