如何在AngularJS中限制按钮点击次数，达到输入值后禁用按钮？

我来帮你搞定这个需求！你的核心目标是让按钮在点击次数等于输入框中指定的数值时变为不可用，咱们来调整你的代码：

原代码的问题点 #

• 缺少控制按钮禁用状态的指令，AngularJS里需要用ng-disabled来绑定禁用条件
• myFunction里的$scope.count <= $scope.number;只是一个无意义的判断，没有对状态产生任何影响
• 输入框类型设为input不够严谨，应该用number来限制输入为数字

修改后的完整代码 #

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Student
<input type="number" ng-model="number" min="0">
<br>
<p> {{number}} </p>
<button ng-click="myFunction()" ng-disabled="count >= number">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    // 设置默认值，避免初始undefined的问题
    $scope.number = 0;
    $scope.myFunction = function() {
        $scope.count++;
    }
});
</script>
</body>
</html>

关键修改说明 #

• 按钮禁用逻辑：给按钮添加ng-disabled="count >= number"，当点击次数count大于等于输入框的number时，按钮自动禁用（用>=是为了处理用户输入后多次点击的情况，更严谨）
• 输入框优化：把type="input"改成type="number"，并加上min="0"，确保用户只能输入非负整数，避免非数字值导致的判断异常
• 默认值设置：给$scope.number设置初始值0，防止页面加载时因为number是undefined导致的判断错误

这样调整后，就能完美实现你想要的功能啦！

内容的提问来源于stack exchange，提问作者Dharna Khandelwal