下拉选中搜索angularjs-dropdown-multiselect.js

需要引入angularjs-dropdown-multiselect.js

页面
html 复制代码
 <div ng-dropdown-multiselect=""     options="supplierList_data" selected-model="supplierList_select" events="changSelValue_supplierList" extra-settings="mucommonsettings"
                         style=" margin-right: 20px;height: 34px ;border-radius: 3px;width: 200px;float: right;text-indent: 0px; "
                         translation-texts="supplierList_customTexts">  </div>
js配置
js 复制代码
    //选中类型
    $scope.supplierList_select = [];
    //数据源
    $scope.supplierList_data = [];
    //多选可以加后面属性全选和全不选
   $scope.apps_customTexts = {buttonDefaultText: '所属公众号',checkAll:'全选',uncheckAll:'全不选'};
//多选把选中id拼接
    $scope.changSelValue_supplierList = {
        onSelectionChanged: function(e) {
           
            const lists = $scope.supplierList_select;
            $scope.param.search_supplier_id = lists ? lists.map(item => item.id).join(',') : '';
        }
    };
//设置
    $scope.mucommonsettings = {
        smartButtonMaxItems: 2,smartButtonTextConverter: function(itemText, originalItem) {
            return itemText;
        },
        scrollableWidth: '200px',
        scrollable: true,
        keyboardControls: true,
        selectionLimit: 1,  // 选中个数
        enableSearch: true, // 是否开启搜索框
        showUncheckAll: false, // 是否显示取消选中按钮
        checkBoxes: false  // 是否显示普通下拉框
    };


    //初始化列表页下拉框填充数据
    $http({
        method: 'POST',
        url: '/xxx/xxx',
        data: {}
    }).success(function (res) {
       
        $scope.supplierList_data = (res.data.supplierList || []).map(item => ({
            id: item.supplier_id, //id
            label: item.supplier_alias //显示名称
        }));
    });

如果觉得有用的话,可以点个赞!

相关推荐
秋天的一阵风25 分钟前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
秋天的一阵风29 分钟前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
Coffeeee39 分钟前
重新开始学Threejs,了解一下里面的一些高级几何体
前端·typescript·three.js
沉迷...1 小时前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
xx24061 小时前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js
古时的风筝1 小时前
Caddy 比Nginx 还优秀吗
前端·后端·程序员
Anlici1 小时前
无脑字节面基🥲
前端·面试·架构
古时的风筝1 小时前
Cursor 建议搭配 CursorRules 食用
前端·后端·cursor
前端南玖1 小时前
通过performance面板验证浏览器资源加载与渲染机制
前端·面试·浏览器
树深遇鹿1 小时前
SSE(Server-Sent Events)的使用
前端·javascript·面试