Aufruf angularjs Funktion auf Texteingabe basierend auf Länge

Question

Ich habe ein Textfeld. Ich möchte eine Methode nur innerhalb des Controllers aufrufen, wenn der Benutzer eine oder mehrere Zeichen in das Textfeld eingegeben hat.

Kann mir bitte jemand Hinweise geben, wie man das angehen kann?

Dank

Answer 1

Id empfehlen ngChange nur mit und zu einer Bewertungsfunktion zu binden. Unten ist ein Beispiel

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

Sie könnten einfach diese

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

gewünschte Funktion nur aufgerufen werden wird durch die Verwendung ng-keyup Richtlinie nur erreichen, wenn die Länge des Modells als gleich n Länge größer ist

Working Plunkr

---

Obwohl die bessere Version würde ng-model-options mit debounce Zeit haben, so dass es die Anzahl der Wertänderung zu reduzieren. Danach können wir einfach ng-change Direktive verwenden, um die Funktion auszulösen.

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

Updated Demo

Answer 3

Wenn Sie das Eingabefeld auf eine Variable mit ngModel binden, können Sie es von der Steuerung sehen (wird nicht sehr elegant, obwohl) $ Uhr oder $ beobachten verwenden, wenn sie sich ändert, und Überprüfen Sie die Länge.

Answer 4

Sie können Ihrem Element eine Direktive und $watch für Modelländerungen hinzufügen. Dann können Sie jede gewünschte Logik auslösen, wenn sich Ihr Modell geändert hat und einen Wert hat. In diesem Fall rufen Sie unser Modell expression. Hier ist ein Beispiel für ein <textarea> Element. Dieser Ansatz kann genauso gut auch für ein <input /> Element verwendet werden.

<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

Ein guter Weg, dies zu tun ist, eine Richtlinie zu verwenden. Hier ist, wie es getan werden könnte:

Ansicht:

<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 hier:

http://jsfiddle.net/dtq0mz8m/