angularjs 下拉框多选实现

随机无敌召唤

已于 2024-08-01 16:32:34 修改

阅读量79

点赞数 1

文章标签： angular.js javascript 前端

于 2024-08-01 16:27:33 首次发布

本文链接：https://blog.csdn.net/likaiCSDN/article/details/140850998

版权

直接保存到文件，浏览器运行，直接就可以用。

主要是借鉴思路吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Custom Multi-Select Dropdown Example</title>
    <style>
        .multi-select {
            position: relative;
            display: inline-block;
        }
        .dropdown {
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1;
            width: 100px; /* 或者设置为您想要的宽度 */
            max-height: 200px; /* 设置最大高度并添加滚动条 */
            overflow-y: auto;
            display: none;
        }
        .dropdown.show {
            display: block;
        }
		/* 增加 <p> 标签与前面元素之间的垂直间距 */
		p {
			margin-top: 120px; /* 调整数值以适应你的设计需求 */
		}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <div class="multi-select">
            <input type="text" readonly placeholder="请选择" ng-model="selectedText" ng-click="toggleDropdown()" />
            <div class="dropdown" ng-class="{show: showDropdown}">
                <div ng-repeat="option in options">
                    <label>
                        <input type="checkbox" ng-model="option.selected" ng-change="updateSelectedText(option)" />
                        {{option.text}}
                    </label>
                </div>
            </div>
        </div>
		
        <p >选中的值: {{selectedOptions | json}}<br> 选中的值: {{selectedText | json}}</p>
     
    </div>

    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function($scope) {
            $scope.options = [
                {text: '选项1', value: 'option1', selected: false},
                {text: '选项2', value: 'option2', selected: false},
                {text: '选项3', value: 'option3', selected: false},
                {text: '选项4', value: 'option4', selected: false}
            ];

            $scope.showDropdown = false;
            $scope.selectedOptions = [];
            $scope.selectedText = "";

            $scope.toggleDropdown = function() {
                $scope.showDropdown = !$scope.showDropdown;
            };

            $scope.updateSelectedText = function(option) {
                if (option.selected) {
                    $scope.selectedOptions.push(option);
                } else {
                    var index = $scope.selectedOptions.indexOf(option);
                    if (index > -1) {
                        $scope.selectedOptions.splice(index, 1);
                    }
                }

                // 更新显示文本
                $scope.selectedText = $scope.selectedOptions.map(function(opt) {
                    return opt.text;
                }).join(', ');
            };

            // 获取多选框元素
            var multiSelectElement = document.querySelector('.multi-select');

            // 监听文档点击事件，如果点击在多选框外部，则隐藏下拉菜单
            document.addEventListener('click', function(event) {
                var target = event.target;
                if (!multiSelectElement.contains(target)) {
                    $scope.showDropdown = false;
                    $scope.$apply(); // 触发AngularJS的脏检查机制
                }
            }, false);
        });
    </script>
</body>
</html>