web-dev-qa-db-fra.com

Appel de la fonction angularjs sur la saisie de texte en fonction de la longueur

J'ai une zone de texte. Je voudrais appeler une méthode à l'intérieur du contrôleur uniquement lorsque l'utilisateur a rempli "n" ou plus de caractères dans la zone de texte.

Quelqu'un peut-il me donner des conseils sur la façon d'aborder cela?

Merci

javascripthtmlangularjsangularjs-ng-change
10
blue piranha

Je recommande d'utiliser simplement ngChange et de se lier à une fonction d'évaluation. Voici un exemple

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>
9
Shadow3188

Vous pouvez simplement y parvenir en utilisant ng-keyup directive

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

La fonction souhaitée ne sera appelée que si la longueur du modèle est supérieure à égale à n length

Plunkr de travail

Bien que la meilleure version soit ng-model-options avec debounce temps, afin de réduire le nombre de changements de valeur. Après cela, nous pouvons facilement utiliser ng-change directive pour déclencher la fonction.

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

Démo mise à jour

6
Pankaj Parkar

Vous pouvez ajouter une directive à votre élément et $watch pour les changements de modèle. Ensuite, vous pouvez déclencher la logique que vous souhaitez lorsque votre modèle a changé et a une valeur. Dans ce cas, appelons notre modèle expression. Voici un exemple pour un <textarea> élément. Cette approche peut tout aussi bien être utilisée pour un <input /> élément également.

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

Exemple JSFiddle

2
scniro

Une bonne façon de procéder consiste à utiliser une directive. Voici comment procéder:

vue:

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

Jouez ici:

http://jsfiddle.net/dtq0mz8m/

1
bioball

Si vous liez le champ de saisie à une variable à l'aide de ngModel, vous pouvez le regarder à partir du contrôleur (n'est pas très élégant, cependant) en utilisant $ watch ou $ observe chaque fois qu'il change, et vérifiez la longueur.

0
Giliar Perez