如何在输入框中输入 6 位数字后调用函数 angularjs

Question

我正在使用 angular。输入6位后我有一个输入框我必须点击按钮。

<input type="tel" ng-model="loginData.otp" id="otp1" placeholder="OTP" >
        </label> 
        <label class="item">
         <button class="button button-block button-positive" id="otplogin" type="submit">Login</button>

  </label>

我输入6位数字后有一个输入框我需要点击按钮。输入 6 digit.so 后如何调用不需要点击按钮的函数？

Answer 1

您可以使用 ng-change 属性，例如 ng-change="inputChanged()"。在你的控制器中你有

$scope.inputChanged = function() { 
    // Check value of $scope.loginData.otp here, example:
    if(!$scope.loginData.otp || $scope.loginData.otp.length < 5) {
        return;
    }
    // then you continue with your processing
};

查看文档了解更多信息：

https://docs.angularjs.org/api/ng/directive/ngChange

更新：

当前接受的答案使用$watch。您应该尽量减少在控制器中使用 $watch（尽可能在指令中，an example of why）。

在这个问题中，你说你对用户输入引起的值变化感兴趣，所以，我认为使用视图的 change 指令是有意义的，因为它是一个用户变化事件。

Answer 2

您也可以使用$scope.$watch 来观察输入的长度。

function TodoCtrl($scope){
    $scope.loginData = { otp: '' };

    $scope.$watch('loginData.otp.length', function(newValue, oldValue){
        if(newValue == 6){
             alert('Process to next level'); 
             // put your function here
        }
    });
}

查看我在http://jsfiddle.net/Zing87/po9rxsLs/1/

中的回答

如何在输入框中输入 6 位数字后调用函数 angularjs

how to call a function after 6 digit entered in input box angularjs

angularjs

angularjs-scope