Angularjs单选改为多选的开发过程及问题解析


Posted in Javascript onFebruary 17, 2017

很简单的需求:之前下拉框是单选,现在想改为多选。

开发过程:

问题一:自己首先想到的是网上找个example,发现貌似AngularJS有相应的js包来实现,其中最多的就是isteven-multi-selectangularjs-dropdown-multiselect等。

我下载了,但是套到自己项目里面,是在是难看的很。而且貌似这些js包耦合性很高,不是我想要的那种,所以还是打算用简单的md-select、md-option、md-checkbox

来实现我想要的效果,又不想写的太人工,所以就查angularjs的一些控件demo,最后果然发现了我想要的。

https://material.angularjs.org/1.1.3/demo/select

于是我就开始往项目里套,但是怎么套,都出不了demo上的样式,多选是能多选了,但是没有像checkbox那种正方形选择框,各种百度各种google,就是不知道什么原因。本来打算都要放弃了,但是这么好的demo,这么省事的js,不忍心放弃啊,再说放弃也找不到其他比较合适的而又不显突兀的样式。于是耐下心来一遍遍的去看setting,所有的都没问题,除了版本不一致。难道?我的第六感告诉我,或许真的是版本原因。之前用的版本是"angular-material": "1.0.0-rc2",改用最新版本"angular-material": "1.1.3",于是,效果出来了,真的是版本原因,容我默默的在卫生间哭一会儿。

问题二:样式的问题解决了,离成功不远了。想做个多选效果,因为选项实在是很多,没有多选实在是体验不好。于是就用其中的一个option来做全选,但是不知道option都有什么事件,找不到相应的属性说明文档,只有一个checked属性,但是在js里面又不知道如何判断checked还是没有checked,最后还是放弃了,最上面做了个按钮,搞定。

问题三:还有个问题,就是更新"angular-material": "1.1.3"版本之后,似乎md-input-Container label长度过长的话,就显示3Dot(...)了,而之前是可以换行显示的,感觉这个体验完全不如之前版本的体验。网上google了好久也没google出来这样修正的好处,于是果断自定义css,改回原来的样式。

涉及到的部分代码:

html:

<md-input-container flex="35" class="md-input-has-value"> 
                    <label>产品类型</label> 
                    <md-select ng-model="params.productType" md-on-close="clearSearchTerm()" ng-change="change(params.productType)" data-md-container-class="selectHeader" multiple> 
                      <div> 
                        <button ng-click="pTCheckNone()" class="md-button md-ink-ripple"><i class="zmdi zmdi-undo ng-scope"></i>重置</button> 
                      </div> 
                      <md-select-header class="select-header"> 
                        <input ng-model="searchTerm" type="search" placeholder="Search for a product.." class="header-searchbox md-text" > 
                      </md-select-header> 
                      <md-optgroup label="productTypes"> 
                        <md-option value="{{item.key}}" ng-repeat="item in productTypes | filter:searchTerm">{{item.value}}</md-option> 
                      </md-optgroup> 
                    </md-select> 
                  </md-input-container>

js:

$scope.productTypes = [ 
   {"key":"SecureSiteProEV1", "value":"product1"}, 
   {"key":"SecureSiteProEV2", "value":"product2"}, 
   {"key":"SecureSiteProEV3", "value":"product3"}, 
   {"key":"SecureSiteProEV4", "value":"product4"}, 
   {"key":"SecureSiteProEV5", "value":"product5"}];

css

md-input-container label:not(.md-no-float):not(.md-container-ignore), 
md-input-container .md-placeholder { 
  white-space: normal; 
}
Javascript 相关文章推荐
jQuery示例收集
Nov 05 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
理解jquery事件冒泡
Jan 03 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue实现百度搜索功能
Dec 28 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 #Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 #Javascript
数组Array的排序sort方法
Feb 17 #Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 #Javascript
数组Array的一些方法(总结)
Feb 17 #Javascript
深入理解javascript的getTime()方法
Feb 16 #Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 #Javascript
You might like
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP文件与目录操作示例
2016/12/24 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
详谈python http长连接客户端
2017/06/12 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python如何建立全零数组
2020/07/19 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
自我鉴定书面格式
2014/01/13 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
新春联欢会主持词
2014/03/24 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python