如何在AngularJS的Select组件中用复选框实现多选功能？

嘿，我来帮你搞定这个需求！你想要的是一个保持下拉样式、带复选框的多选选择器，还不能用原生select的multiple属性对吧？刚好你已经引入了AngularUI Bootstrap，咱们直接基于它的下拉组件来改造就好，完美符合你的要求。

先给你完整的实现代码，替换掉你原来的select部分就行：

<!DOCTYPE html>
<html>
<head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script>
        (function() {
            angular.module("myApp", ['ui.bootstrap'])
            .controller('test', ['$scope', function($scope) {
                $scope.rules = [
                    {name:"abc", status:"enable", triggerOn: "none", onSuccess: "on" },
                    {name:"abc", status:"enable", triggerOn: "any", onSuccess: "on" },
                    {name:"abc", status:"enable", triggerOn: "all", onSuccess: "on" }
                ];

                // 存储选中的规则数组
                $scope.selectedRules = [];
                // 下拉面板显示的文本
                $scope.selectedText = "请选择触发条件";

                // 切换选项的选中状态
                $scope.toggleSelection = function(rule) {
                    var idx = $scope.selectedRules.findIndex(item => item.triggerOn === rule.triggerOn);
                    if (idx > -1) {
                        // 已选中，移除
                        $scope.selectedRules.splice(idx, 1);
                    } else {
                        // 未选中，添加
                        $scope.selectedRules.push(rule);
                    }
                    // 更新显示文本
                    $scope.updateSelectedText();
                };

                // 更新顶部显示的选中文本
                $scope.updateSelectedText = function() {
                    if ($scope.selectedRules.length === 0) {
                        $scope.selectedText = "请选择触发条件";
                    } else if ($scope.selectedRules.length === $scope.rules.length) {
                        $scope.selectedText = "全选";
                    } else {
                        $scope.selectedText = `已选 ${$scope.selectedRules.length} 项`;
                        // 也可以显示具体的选项文本，比如：
                        // $scope.selectedText = $scope.selectedRules.map(r => r.triggerOn).join(', ');
                    }
                };
            }]);
        }());
    </script>
    <style>
        .custom-dropdown-toggle {
            width: 200px;
            text-align: left;
        }
        .dropdown-menu {
            width: 200px;
        }
        .dropdown-item {
            padding: 8px 15px;
            cursor: pointer;
        }
        .dropdown-item:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body ng-app="myApp">
    <div ng-controller="test">
        <!-- 自定义带复选框的下拉多选组件 -->
        <div class="dropdown" uib-dropdown>
            <button class="btn btn-default custom-dropdown-toggle" uib-dropdown-toggle>
                {{selectedText}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu>
                <li class="dropdown-item" ng-repeat="rule in rules track by rule.triggerOn">
                    <label>
                        <input type="checkbox" 
                               ng-checked="selectedRules.some(item => item.triggerOn === rule.triggerOn)"
                               ng-click="toggleSelection(rule)">
                        {{rule.triggerOn}}
                    </label>
                </li>
            </ul>
        </div>

        <div style="margin-top: 20px;">
            <b>Selected Rules:</b> {{selectedRules}}
        </div>
    </div>
</body>
</html>

关键实现细节说明： #

1. 依赖引入：首先要把你的Angular模块依赖加上ui.bootstrap，因为咱们用到了UI Bootstrap的下拉组件。
2. 状态维护：用selectedRules数组存储用户选中的规则，替代原来的selectedRule模型。
3. 下拉交互：用uib-dropdown系列指令创建下拉容器，uib-dropdown-toggle触发下拉面板的显示/隐藏，uib-dropdown-menu定义下拉内容。
4. 复选框逻辑：
   • ng-checked判断当前规则是否在选中数组里，控制复选框的选中状态
   • ng-click触发toggleSelection方法，实现选中/取消选中的切换
5. 显示优化：updateSelectedText方法根据选中项的数量动态更新顶部按钮的文本，用户体验更好。
6. 样式自定义：添加了简单的CSS来调整下拉组件的宽度和鼠标 hover 效果，你可以根据自己的需求修改。

这样实现的组件完全保持了下拉的样式，同时支持多选，完全满足你的要求，而且不需要用原生select的multiple属性。

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