AngularJS中如何实现文件上传后单独禁用对应文件输入框

问题的核心是你用了单个全局的$scope.disabled变量来控制两个输入框的禁用状态，所以只要其中一个触发改变，两个都会跟着禁用。我们需要给每个输入框分配独立的状态变量来实现单独控制。

下面是修改后的完整代码，我会一步步解释调整点：

修改后的控制器代码 #

angular.module('app', []).controller('ctrl', function($scope) {
  // 给每个输入框单独设置禁用状态，初始都为false（不禁用）
  $scope.fileDisabled = {
    first: false,
    second: false
  };

  // 定义上传后禁用对应输入框的方法
  $scope.disableFileInput = function(inputKey) {
    $scope.fileDisabled[inputKey] = true;
  };
});

对应的HTML部分 #

<div ng-app="app" ng-controller="ctrl">
  <!-- 第一个文件输入框，绑定first的禁用状态，上传后调用方法禁用自己 -->
  <input type="file" ng-disabled="fileDisabled.first" onchange="angular.element(this).scope().disableFileInput('first')">
  
  <!-- 第二个文件输入框，绑定second的禁用状态，上传后调用方法禁用自己 -->
  <input type="file" ng-disabled="fileDisabled.second" onchange="angular.element(this).scope().disableFileInput('second')">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
  .ng-disabled {
    background-color: #eee;
    cursor: not-allowed;
  }
</style>

关键调整说明 #

• 把原来单个的$scope.disabled替换成了一个对象fileDisabled，里面包含两个独立的属性first和second，分别对应两个输入框的禁用状态。
• 新增了disableFileInput方法，接收一个key参数，用来指定要禁用哪个输入框的状态，这样上传时只会修改对应输入框的禁用变量。
• 每个文件输入框的ng-disabled绑定到各自的状态属性，onchange事件触发时调用方法并传入对应的key，确保只禁用当前上传的输入框。

如果你有更多输入框，这种对象（或者数组）的方式也很容易扩展，比如用数组$scope.fileDisabled = [false, false, false]，然后输入框绑定fileDisabled[0]、fileDisabled[1]即可。

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