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的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
js重写方法的简单实现
Jul 10 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
小程序实现多选框功能
Oct 30 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python简单读取大文件的方法
2016/07/01 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
医药营销个人求职信
2014/04/12 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python