AngularJS新手求助：如何为现有下拉框添加多选功能

嘿，作为AngularJS和JavaScript新手，想把单选下拉改成多选组件对吧？我给你两种实用的实现方案，从简单原生到体验更好的第三方组件，一步步来～

这种方式不需要引入任何第三方库，适合快速上手验证功能。

步骤1：修改HTML结构 #

只需要给原有的<select>标签添加multiple属性，同时调整模型和验证逻辑：

<div id="mMethod"> 
  <label style="font-size: medium">Method (多选)</label> 
  <!-- 添加multiple属性，size控制显示的选项行数 -->
  <select name="mMethod" class="form-control" multiple size="5" 
          ng-model="request.selectedMethods" at-least-one-selected> 
    <option ng-repeat="method in mMethods" value="{{method.value}}">{{ method.value }}</option> 
  </select> 
  <!-- 调整验证提示 -->
  <div style="color:maroon" ng-if="reuqestForm.mMethod.$touched && reuqestForm.mMethod.$invalid"> 
    <div ng-if="reuqestForm.mMethod.$error.atLeastOneSelected">请至少选择一个方法</div>
  </div>
</div>

步骤2：调整控制器逻辑 #

原生多选的ng-model需要绑定数组，所以要初始化一个空数组；另外我们需要自定义一个验证器来确保至少选中一个选项：

// 在你的AngularJS控制器中
angular.module('yourApp', [])
// 自定义验证指令：确保至少选择一个选项
.directive('atLeastOneSelected', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$validators.atLeastOneSelected = function(modelValue) {
        // 验证数组是否有至少一个元素
        return Array.isArray(modelValue) && modelValue.length > 0;
      };
    }
  };
})
.controller('yourController', function($scope) {
  // 示例选项数据
  $scope.mMethods = [
    {value: 'GET'},
    {value: 'POST'},
    {value: 'PUT'},
    {value: 'DELETE'},
    {value: 'PATCH'}
  ];
  // 初始化多选模型为数组
  $scope.request = {
    selectedMethods: []
  };
});

注意点 #

• 原生多选需要按住Ctrl（Windows）/Cmd（Mac）来选择多个选项，用户体验相对一般
• size属性可以控制下拉框默认显示的行数，避免默认高度太矮

如果想要更流畅的多选体验（比如搜索、标签式选中），推荐使用AngularJS生态中常用的ui-select组件。

步骤1：引入依赖 #

首先需要在项目中引入ui-select和ngSanitize（组件依赖），可以通过npm/bower安装，或者直接引入CDN资源。然后在你的模块中注入依赖：

angular.module('yourApp', ['ui.select', 'ngSanitize']);

步骤2：替换HTML为ui-select组件 #

<div id="mMethod"> 
  <label style="font-size: medium">Method (多选)</label> 
  <ui-select multiple ng-model="request.selectedMethods" theme="bootstrap" class="form-control"
             at-least-one-selected>
    <!-- 选中项的显示模板 -->
    <ui-select-match placeholder="请选择方法...">{{$item.value}}</ui-select-match>
    <!-- 下拉选项模板，支持搜索过滤 -->
    <ui-select-choices repeat="method in mMethods | filter: $select.search">
      <div ng-bind-html="method.value | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
  <!-- 验证提示和方案一一致 -->
  <div style="color:maroon" ng-if="reuqestForm.mMethod.$touched && reuqestForm.mMethod.$invalid"> 
    <div ng-if="reuqestForm.mMethod.$error.atLeastOneSelected">请至少选择一个方法</div>
  </div>
</div>

步骤3：控制器逻辑 #

控制器的初始化和方案一完全一致，验证指令也可以复用，不需要额外修改。

优势 #

• 支持搜索过滤选项，适合选项较多的场景
• 选中项以标签形式展示，用户可以直接点击标签删除
• 交互更符合现代UI体验，不需要按住快捷键多选

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