Angular新手求助：如何将3个下拉菜单合并为一个？

嘿，作为Angular新手遇到这种重复代码的问题太常见啦！咱们可以通过数组管理选中项+通用过滤函数的方式，把三个下拉菜单的逻辑合并成一套，彻底消除冗余代码。

原代码的问题分析 #

你现在的代码里，selectname1/2/3和filter1/2/3的逻辑完全一致，只是变量名不同——这就是典型的重复代码，不仅维护麻烦，以后要加更多下拉的话会更头疼。

修改后的完整代码 #

JavaScript 部分

function HelloCntl($scope) { 
  // 用数组管理三个选中项，代替三个独立变量
  $scope.selectedNames = [{}, {}, {}]; 

  // 通用过滤函数，接收下拉菜单的索引，判断是否排除当前item
  $scope.filterItem = function(item, index) {
    const selected = $scope.selectedNames[index];
    // 逻辑和你原来的完全一致，只是复用了代码
    return !(selected && selected.id) || item.id !== selected.id;
  }; 

  $scope.friends = [ 
    { id:1,name: 'John'}, 
    { id:2,name: 'Mary'}, 
    { id:3,name: 'Mike'}, 
    { id:4,name: 'Adam'}, 
    { id:5,name: 'Julie'} 
  ]; 
} 

HTML 部分

<div ng:app> 
  <div ng-controller="HelloCntl">
    <!-- 第一个下拉菜单，对应数组索引0 -->
    <select ng-model="selectedNames[0]" 
            ng-options="friend as friend.name for friend in friends | filter: function(item) { return filterItem(item, 0) }">
      <option value="">选择好友</option>
    </select>

    <!-- 第二个下拉菜单，对应数组索引1 -->
    <select ng-model="selectedNames[1]" 
            ng-options="friend as friend.name for friend in friends | filter: function(item) { return filterItem(item, 1) }">
      <option value="">选择好友</option>
    </select>

    <!-- 第三个下拉菜单，对应数组索引2 -->
    <select ng-model="selectedNames[2]" 
            ng-options="friend as friend.name for friend in friends | filter: function(item) { return filterItem(item, 2) }">
      <option value="">选择好友</option>
    </select>
  </div>
</div>

关键优化点 #

• 数组管理选中项：把三个独立的selectname变量换成selectedNames数组，以后要加第4、第5个下拉，只需要在数组里加空对象，不用新增变量。
• 通用过滤函数：filterItem函数接收索引参数，根据索引找到对应的选中项，复用了原来的过滤逻辑，避免写三个几乎一样的函数。
• HTML绑定复用：每个下拉菜单只需要修改绑定的数组索引和过滤函数的参数，结构完全一致，维护起来更轻松。

这样修改后，功能和你原来的代码完全一样，但代码简洁了很多，也更容易扩展～

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