基于长度调用文本输入上的angularjs函数

Question

我有一个文本框.我想在用户在文本框中填写"n"或更多字符时调用控制器内的方法.

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

谢谢

Answer 1

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

工作Plunkr

虽然ng-model-options随着debounce时间的推移会有更好的版本,但它会减少价值变化的数量.之后我们可以轻松使用ng-change指令来触发功能.

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

更新了演示