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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
js实现模拟购物商城案例
May 18 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面向对象分析设计的经验原则
2008/09/20 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python标准库itertools的使用方法
2020/01/17 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
python入门之井字棋小游戏
2020/03/05 Python
python logging通过json文件配置的步骤
2020/04/27 Python
python属于跨平台语言码
2020/06/09 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
商务英语专业求职信范文
2014/01/28 职场文书
社区母亲节活动记录
2014/03/06 职场文书
2014年村官工作总结
2014/11/24 职场文书
高温慰问简报
2015/07/21 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript