相思资源网 Design By www.200059.com

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

开发过程:

问题一:自己首先想到的是网上找个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; 
} 

标签:
angularjs,单选,angularjs多选

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无Angularjs单选改为多选的开发过程及问题解析的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?