Wywołanie funkcji angularjs przy wprowadzaniu tekstu na podstawie długości

Question

Mam pole tekstowe. Chciałbym wywołać metodę wewnątrz kontrolera tylko wtedy, gdy użytkownik wypełnił "n" lub większą liczbę znaków w polu tekstowym.

Czy ktoś może podać mi wskazówki, jak się do tego podejść?

Dzięki

Answer 1

Id polecić tylko przy użyciu ngChange i wiązanie z funkcji oceny. Poniżej próbka

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

Można po prostu to osiągnąć za pomocą ng-keyup dyrektywę

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

Pożądany funkcja pobiera tylko wywoływana tylko jeśli długość modelu jest większa niż równa n długości

Working Plunkr

---

Chociaż lepsza wersja będzie miała czas ng-model-options z czasem debounce, więc zmniejszy liczbę zmian wartości. Po tym możemy łatwo użyć dyrektywy ng-change do strzelania.

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

Updated Demo

Answer 3

Jeśli powiązać pole wprowadzania do zmiennej przy użyciu ngModel, można oglądać go ze sterownika (nie jest bardzo elegancki, chociaż) używając $ zegarek lub $ obserwować, kiedy to zmienia, a sprawdź długość.

Answer 4

Możesz dodać dyrektywę do swojego elementu i $watch dla zmian modelu. Następnie możesz odpalić dowolną logikę, gdy zmieniasz model i ma on wartość. W takim przypadku zadzwoń do naszego modelu expression. Oto przykład dla elementu <textarea>. Takie podejście może być równie dobrze użyte dla elementu <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

Dobrym sposobem na to jest użycie dyrektywy. Oto jak może to być zrobione:

zobacz:

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

Fiddle tutaj:

http://jsfiddle.net/dtq0mz8m/