AngularJS中如何在文本输入框失焦时移除按钮的Bootstrap disabled类？

嘿，这个需求在AngularJS里很好实现，我给你两种实用的方案，看哪种更适合你的代码结构：

方案一：控制器函数结合ng-blur和ng-class #

这种方式逻辑清晰，适合后续可能需要扩展验证规则的场景。

首先是HTML结构：

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="inputValue" ng-blur="checkInputValidity()">
  <!-- 用ng-class控制Bootstrap的disabled类 -->
  <button class="btn btn-primary" ng-class="{'disabled': !isInputValid}">提交按钮</button>
</div>

然后是对应的AngularJS控制器代码：

angular.module('myApp', [])
.controller('myController', function($scope) {
  // 初始状态：按钮处于禁用状态
  $scope.isInputValid = false;

  $scope.checkInputValidity = function() {
    // 这里可以根据需求调整验证规则，比如排除纯空格的情况
    $scope.isInputValid = $scope.inputValue && $scope.inputValue.trim().length > 0;
  };
});

思路解释：

• ng-blur 指令会在输入框失去焦点（按Tab或点击离开）时触发checkInputValidity函数
• 函数里判断输入框是否有有效内容（这里用trim()排除了用户只输入空格的情况，如果不需要可以去掉）
• ng-class 会根据isInputValid的值动态添加/移除disabled类：当值为false时保留类，值为true时移除类

方案二：简洁版（无需额外控制器函数） #

如果你的验证逻辑很简单，不想写额外的控制器函数，可以直接在模板里处理：

<div ng-app="myApp">
  <input type="text" ng-model="inputValue" ng-blur="isValid = inputValue && inputValue.trim().length > 0">
  <button class="btn btn-primary" ng-class="{'disabled': !isValid}">提交按钮</button>
</div>

思路解释：

• 直接在ng-blur的表达式里完成验证并赋值给isValid变量
• 同样通过ng-class控制disabled类的存在，代码更简洁，适合简单场景

额外提示 #

• 如果你需要实时验证（不用等失焦，输入时就判断），可以把ng-blur换成ng-change
• 如果你同时想让按钮不可点击（不仅仅是视觉上的禁用），可以结合ng-disabled="!isInputValid"，不过Bootstrap的disabled类已经会阻止按钮点击事件，所以看你的需求选择

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