AngularJS实现输入/下拉框互斥禁用及提示功能技术求助

嘿，我来帮你搞定这个AngularJS的表单控制需求！你的思路完全在线，ng-model、ng-disabled、ng-change这些指令正是我们需要的核心工具，下面我一步步给你实现完整的功能，还会解释每个部分的作用，让你能理解背后的逻辑~

第一步：编写AngularJS控制器逻辑 #

首先我们需要定义一个控制器，用来跟踪哪个控件被激活，以及判断其他控件是否需要禁用，同时生成提示信息：

angular.module('myApp', [])
.controller('FormController', function($scope) {
  // 存储当前激活的控件标识（比如'select'、'input1'）
  $scope.activeControl = null;

  // 激活控件的方法：选中下拉框或输入内容时触发
  $scope.activateControl = function(controlId) {
    $scope.activeControl = controlId;
  };

  // 判断控件是否需要禁用：如果已有激活控件，且当前控件不是激活的那个，就禁用
  $scope.shouldDisable = function(controlId) {
    return $scope.activeControl !== null && $scope.activeControl !== controlId;
  };

  // 生成禁用提示信息
  $scope.getDisableMessage = function() {
    if (!$scope.activeControl) return '';
    
    let controlName = '';
    switch($scope.activeControl) {
      case 'select':
        controlName = '下拉框选项';
        break;
      case 'input1':
        controlName = 'Choix A 输入框';
        break;
      case 'input2':
        controlName = 'Choix B 输入框';
        break;
      case 'input3':
        controlName = 'Choix C 输入框';
        break;
      case 'input4':
        controlName = 'Choix D 输入框';
        break;
    }
    return `已选择${controlName}，其余控件已禁用`;
  };
});

第二步：改造你的HTML表单 #

接下来把控制器和表单关联起来，给每个控件添加对应的AngularJS指令，同时加上提示信息区域：

<div ng-app="myApp" ng-controller="FormController">
  <!-- 禁用提示信息：只有当有控件被激活时显示 -->
  <div class="alert alert-info" ng-show="activeControl !== null">
    {{ getDisableMessage() }}
  </div>

  <form>
    <div class="form-group">
      <label for="Select1">Choix</label>
      <select class="form-control" id="exampleFormControlSelect1" 
              ng-model="selectedOption" 
              ng-change="activateControl('select')"
              ng-disabled="shouldDisable('select')">
        <option value="">请选择</option> <!-- 新增空选项，避免页面加载就默认选中第一个 -->
        <option>choix 1</option>
        <option>choix 2</option>
        <option>choix 3</option>
        <option>choix 4</option>
        <option>choix 5</option>
      </select>
    </div>

    <div class="form-group">
      <label for="Input1">Choix A</label>
      <input type="text" class="form-control" id="Input1" placeholder="Choix A"
             ng-model="input1Value"
             ng-change="activateControl('input1')"
             ng-disabled="shouldDisable('input1')">
    </div>

    <div class="form-group">
      <label for="Input2">Choix B</label>
      <input type="text" class="form-control" id="Input2" placeholder="Choix B"
             ng-model="input2Value"
             ng-change="activateControl('input2')"
             ng-disabled="shouldDisable('input2')">
    </div>

    <div class="form-group">
      <label for="Input3">Choix C</label>
      <input type="text" class="form-control" id="Input3" placeholder="Choix C"
             ng-model="input3Value"
             ng-change="activateControl('input3')"
             ng-disabled="shouldDisable('input3')">
    </div>

    <div class="form-group">
      <label for="Input4">Choix D</label>
      <input type="text" class="form-control" id="Input4" placeholder="Choix D"
             ng-model="input4Value"
             ng-change="activateControl('input4')"
             ng-disabled="shouldDisable('input4')">
    </div>
  </form>
</div>

额外调整说明 #

如果你的需求是用户点击输入框获得焦点时就禁用其他控件（而不是输入内容后），可以把输入框的ng-change换成ng-focus，这样用户只要点击输入框，不管有没有输入内容，都会触发激活逻辑。

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