AngularJS下拉选择切换输入框ng-model实现方案求助

方法一：控制器监听切换（推荐，逻辑清晰） #

核心思路是通过$watch监听下拉选项变化，动态切换输入框绑定的模型引用，实现双向绑定同步。

模板代码 #

<!-- 下拉选择框 -->
<select ng-model="selectedOption">
  <option value="Test1">Test1</option>
  <option value="Test12">Test12</option>
  <option value="Test14">Test14</option>
  <option value="Test18">Test18</option>
  <option value="Test25">Test25</option>
</select>

<!-- 动态绑定的输入框 -->
<input type="text" ng-model="currentTargetModel" placeholder="输入内容">

控制器代码 #

angular.module('app', [])
.controller('EmailController', function($scope) {
  // 初始化数据模型
  $scope.Data = {
    EmailInput: {
      To: '',
      ToSpecialCase: ''
    }
  };

  // 默认选中Test1
  $scope.selectedOption = 'Test1';
  // 初始绑定To字段
  $scope.currentTargetModel = $scope.Data.EmailInput.To;

  // 监听下拉选项变化，切换绑定的模型
  $scope.$watch('selectedOption', function(newOption) {
    switch(newOption) {
      case 'Test1':
        $scope.currentTargetModel = $scope.Data.EmailInput.To;
        break;
      case 'Test18':
      case 'Test25':
        $scope.currentTargetModel = $scope.Data.EmailInput.ToSpecialCase;
        break;
      default:
        // 其他选项可设置为空或保持之前的绑定，按需调整
        $scope.currentTargetModel = '';
    }
  });
});

方法二：模板内条件表达式（适合简单场景） #

无需额外控制器逻辑，直接在ng-model中写入条件判断，适合规则简单的场景。

模板代码 #

<select ng-model="selectedOption">
  <option value="Test1">Test1</option>
  <option value="Test12">Test12</option>
  <option value="Test14">Test14</option>
  <option value="Test18">Test18</option>
  <option value="Test25">Test25</option>
</select>

<input type="text" 
       ng-model="selectedOption === 'Test1' ? Data.EmailInput.To : 
                (selectedOption === 'Test18' || selectedOption === 'Test25' ? Data.EmailInput.ToSpecialCase : '')"
       placeholder="输入内容">

控制器代码 #

angular.module('app', [])
.controller('EmailController', function($scope) {
  $scope.Data = {
    EmailInput: {
      To: '',
      ToSpecialCase: ''
    }
  };
  $scope.selectedOption = 'Test1';
});

方法三：修正ng-if方案（解决你之前的问题） #

你之前用ng-if失效，大概率是兼容性或作用域问题，以下是修正后的代码：

模板代码 #

<select ng-model="selectedOption">
  <option value="Test1">Test1</option>
  <option value="Test12">Test12</option>
  <option value="Test14">Test14</option>
  <option value="Test18">Test18</option>
  <option value="Test25">Test25</option>
</select>

<!-- 选择Test1时显示绑定To的输入框 -->
<input type="text" ng-model="Data.EmailInput.To" ng-if="selectedOption === 'Test1'">

<!-- 选择Test18/Test25时显示绑定ToSpecialCase的输入框 -->
<input type="text" ng-model="Data.EmailInput.ToSpecialCase" ng-if="selectedOption === 'Test18' || selectedOption === 'Test25'">

<!-- 其他选项时可显示占位输入框或隐藏，按需调整 -->
<input type="text" ng-if="selectedOption !== 'Test1' && selectedOption !== 'Test18' && selectedOption !== 'Test25'" placeholder="无绑定">

控制器代码 #

angular.module('app', [])
.controller('EmailController', function($scope) {
  $scope.Data = {
    EmailInput: {
      To: '',
      ToSpecialCase: ''
    }
  };
  $scope.selectedOption = 'Test1';
});

注意：ng-if会创建子作用域，但因为Data是对象类型，AngularJS原型继承会正确传递属性，避免绑定失效；若之前用了includes方法，可能因旧浏览器不支持ES6语法导致问题，换成||判断单个选项即可。

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