AngularJS下拉菜单：选中单个选项填充两个不同输入框

嘿，别发愁！作为AngularJS新手碰到这种绑定问题太正常了，我来给你捋清楚怎么实现这个自动填充的需求～

核心思路 #

咱们不用给option单独加name/id，AngularJS的核心是数据绑定，只要把下拉框的选中值绑定到变量，再写个简单的拆分逻辑，就能把选项里的金额和类型分别提取到对应的输入框里。

完整可运行代码示例 #

<div ng-app="myApp" ng-controller="RegistrationCtrl">
  <!-- 下拉选择菜单 -->
  <select ng-model="selectedOption" ng-change="splitRegData()">
    <option value="">请选择注册类型</option>
    <option>$155.00 Two Day</option>
    <option>$200.00 Three Day</option>
    <option>$99.00 Single Day</option>
  </select>

  <!-- 注册类型输入框 -->
  <input type="text" ng-model="regType" placeholder="注册类型">

  <!-- 注册金额输入框 -->
  <input type="text" ng-model="regAmount" placeholder="注册金额">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope) {
  // 拆分选中的选项内容
  $scope.splitRegData = function() {
    // 先判断有没有选中有效选项，避免空值报错
    if (!$scope.selectedOption) return;
    
    // 按空格把选项文本拆成数组
    var contentParts = $scope.selectedOption.split(' ');
    // 第一个元素是金额
    $scope.regAmount = contentParts[0];
    // 从第二个元素开始拼接成完整的注册类型
    $scope.regType = contentParts.slice(1).join(' ');
  };
});
</script>

关键代码说明 #

• ng-model="selectedOption"：把下拉框的选中值绑定到$scope里的selectedOption变量，这样选中的内容会自动同步到这个变量里
• ng-change="splitRegData()"：当下拉选项改变时，自动触发拆分函数
• splitRegData()函数：
  1. 先做空值判断，防止没选选项时执行逻辑报错
  2. 用split(' ')把选项文本按空格拆分成数组，比如"$155.00 Two Day"会变成["$155.00", "Two", "Day"]
  3. 数组第一个元素直接赋值给金额输入框的绑定变量regAmount
  4. 用slice(1)取出数组从第二个元素开始的部分，再用join(' ')拼接成完整的类型文本，赋值给regType

更健壮的优化方案（可选） #

如果以后选项的格式可能有变化（比如类型里有多个空格），用正则表达式提取会更稳妥：

$scope.splitRegData = function() {
  if (!$scope.selectedOption) return;
  // 正则匹配"$金额 类型"的格式
  var matchResult = $scope.selectedOption.match(/^(\$\d+\.\d+) (.*)$/);
  if (matchResult) {
    $scope.regAmount = matchResult[1];
    $scope.regType = matchResult[2];
  }
};

为啥之前的方法没成功？ #

你之前尝试给option加name/id，其实是用了原生JS操作DOM的思路，但AngularJS更推荐通过数据绑定来关联视图和数据，不用直接去操作DOM元素的id或name。咱们只要管好$scope里的变量，视图会自动跟着更新，这才是Angular的正确打开方式～

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