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

需要引入angularjs-dropdown-multiselect.js

页面
 <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配置
//选中类型$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, //idlabel: item.supplier_alias //显示名称}));});

效果图

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/573212.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙HarmonyOS应用开发之Node-API常见问题

ArkTS/JS侧import xxx from libxxx.so后&#xff0c;使用xxx报错显示undefined/not callable 排查.cpp文件在注册模块时的模块名称与so的名称匹配一致。 如模块名为entry&#xff0c;则so的名字为libentry.so&#xff0c;napi_module中nm_modname字段应为entry&#xff0c;大小…

【Linux】网络基础1

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 目录 &#x1f449;&#x1f3fb;一些常见网络设备&#x1f449;&#x1f3fb;网络协议(栈)&#x1f449;&#x1f3fb;协议分层OSI参考模型每个层…

线程局部存储(TLS)

线程局部存储&#xff08;Thread Local Storage&#xff0c;TLS&#xff09;&#xff0c;是一种变量的存储方法&#xff0c;这个变量在它所在的线程内是全局可访问的&#xff0c;但是不能被其他线程访问到&#xff0c;这样就保持了数据的线程独立性。而熟知的全局变量&#xff…

【jmeter+ant+jenkins】之搭建 接口自动化测试平台

平台搭建 (1). 录制jmeter脚本 (2). 将jmeter的安装目录下的G:\jmeter\apache-jmeter-5.1.1\extras中&#xff0c;将 ”ant-jmeter-1.1.1.jar”文件放到 ant的lib目录下 (3). 配置jmeter的xml配置文件&#xff0c;并放在ant目录的bin目录下&#xff0c;使用ant编译验证jmeter的…

使用itext-core生成PDF

1、添加引用依赖包 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-core</artifactId><version>8.0.3</version><type>pom</type></dependency> 2、上代码 package com.student.demo.pdf;impor…

day11-数据统计(图形报表)

1. Apache ECharts 1.1 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。 官网地址&#xff1a;https://echarts.apache.org/zh/index.html 常见效果展示&a…

日本EPSON 爱普生HUD汽车抬头显示系统芯片

目前HUD产品在新车上的配装率逐年上升&#xff0c;预计在2025年将达到30%。那么在介绍爱普生HUD整合方案之前&#xff0c;让我们先了解一下什么叫HUD。 HUD&#xff08;Head Up Display&#xff09;中文叫抬头显示系统&#xff0c;又被叫做平行显示系统。早被应用在飞机辅助…

未来制造:机器人行业新质生产力提升策略

机器人行业新质生产力提升咨询方案 一、机器人行业目前发展现状及特点&#xff1a; 创新活跃、应用广泛、成长性强。 二、机器人企业发展新质生产力面临的痛点&#xff1a; 1、高端人才匮乏 2、核心技术受限 3、竞争日益国际化 4、成本控制挑战 5、用户体验提升需求 三…

node.js项目初始化操作

项目环境Vscode 1.新建一个文件夹node.js(xx.js) 2.右键点击node.js&#xff0c;点击打开终端 我在VScode打开终端 输入npm init初始化项目没反应。 解决方法&#xff1a;进入文件夹node.js&#xff0c;出入cmd跳转到终端 重新输入npm init命令 正确结果如下图 后续命令按下…

springboot-vue前后端分离项目实例

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

unity学习(73)——服务器异常--无法处理 123类型的数据包

服务器发送回的数据包&#xff0c;客户端根本读不出来&#xff0c;type都读不出来&#xff0c;拖了三天&#xff0c;把客户端翻了个底朝天&#xff0c;发现客户端一点问题都没有&#xff01; 所有的问题不是unity的模型问题&#xff0c;就是socket网络通信中断&#xff01; 1…

电子电器架构 —— 诊断数据DTC具体故障篇

电子电器架构 —— 诊断数据DTC起始篇 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师 (Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝完再挣扎…