根据长度对文本输入调用 angularjs 函数

Question

我有一个文本框。我想仅当用户在文本框中填写 'n' 或更多字符时才调用控制器内部的方法。

有人可以指点一下如何处理这个问题吗？

谢谢

Answer 1

您可以简单地通过使用 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 2

如果您使用 ngModel 将输入字段绑定到一个变量，您可以在控制器更改时使用 $watch 或 $observe 观察它（虽然不是很优雅），并检查长度。

Answer 3

您可以向您的元素添加指令，并 $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 4

我建议只使用 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 5

执行此操作的一个好方法是使用指令。以下是如何完成的：

查看：

<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 这里：

http://jsfiddle.net/dtq0mz8m/

根据长度对文本输入调用 angularjs 函数

Calling angularjs function on text input based on length

javascript

html

angularjs

angularjs-ng-change