angularJs实现下拉框多选

话不多说,直接上干货。

肯定需要下拉选插件。必须引入的是   注意 先后顺序

select2.css
select2-bootstrap.css
select2.min.js
angular.min.js
angular-select2.js

ok,然后只需要写上一段代码就ok,如下
<input select2 select2-model="entity.brandIds"  config="brandList" multiple placeholder=" 选择品牌(可多选) " class="form-control">

解释一下什么意思,

select2-model 意思是你把选中的值都会自动放在这个变量上。
config  意思是下拉框的数据来源  必须符合格式:
$scope.config3 = {
        data: [{id:1,text:‘bug‘},{id:2,text:‘duplicate‘},{id:3,text:‘invalid‘},{id:4,text:‘wontfix‘}]
        // 其他配置略,可以去看看内置配置中的ajax配置
    };
multiple 意思是可以多选

ok 大功告成
 

原文地址:https://www.cnblogs.com/coder-lzh/p/9096514.html

时间: 2024-10-09 22:40:16

angularJs实现下拉框多选的相关文章

jquery实现下拉框多选

一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

ops-web运维平台-create.jsp-mootools下拉框-复选框

create.jsp页面的,body部分 <body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},true)"> <div id="title">${pageTitle}</div> <s:form id="MYFORM" action="%{pageAction}" method="post&q

bootstrap-select实现下拉框多选效果

bootstrap-select实现下拉框多选效果 听语音 在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 方法/步骤 1 最终实现的效果: 2 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label f

帆软下拉框不选为空可选择显示全部值

方法一:sql查询不传参数  模板→模板参数→添加参数默认值 参数设置 https://www.cnblogs.com/zhuyu139/p/12066574.html 单元格过滤公式→if(len($大区)==0,nofilter,$大区) 预览即可 方法二:sql查询语句 ${if(len(area) == 0,"","and 货主地区 = '" + area + "'")} sql做了筛选操作,下拉重新设置为数据查询 原文地址:https:

MVC5 下拉框(多选)

1.Model [Display(Name = "职位")] [Required] public int[] job { get; set; } //职位属性 public IEnumerable<Item> joblist { get; set; } //多选框属性 2.cotroller [Description("职位绑定")] [LoginAllowView] private List<Item> bindPosts() { Stri

jquery.multiSelect下拉框多选

使用multiSelect需要导入jquery.bgiframe.min.js,jquery.multiSelect.css,jquery.multiSelect.js还有一些图片,详见附件. 案例 jsp代码: <td>部门:         <select id="departmentId" name="roleIds" style="width:180px" multiple="multiple">

WebForm使用AngularJS实现下拉框多级联动

数据准备 1 using System.Collections.Generic;  2 using System.Linq;  3   4 namespace FourLevelDemo.Services  5 {  6     public class CategoryService  7     {  8         private static List<Category> GetCategories()  9         { 10             return new 

jQuery select下拉框设置选中项

$("#selectId option:last").prop("selected", 'selected'); $("#selectId option").eq(0).attr("selected", true);

select 下拉框的选中项的change事件

HTML文件 <span style="float: left;">类      型:   <select id="type" class="easyui-combobox" name="type" style="width: 90px;" data-options="required:false"> <option value="1"