最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Angularjs單選改為多選的開發(fā)過程及問題解析

 更新時間:2017年02月17日 08:44:58   作者:JenniferGe  
在項目中遇到這樣的需求想把下拉框的單選改為多選,怎么實現(xiàn)呢?下面小編通過本文給大家分享angularjs單選改為多選的開發(fā)過程及問題解析,需要的朋友參考下

很簡單的需求:之前下拉框是單選,現(xiàn)在想改為多選。

開發(fā)過程:

問題一:自己首先想到的是網(wǎng)上找個example,發(fā)現(xiàn)貌似AngularJS有相應(yīng)的js包來實現(xiàn),其中最多的就是isteven-multi-selectangularjs-dropdown-multiselect等。

我下載了,但是套到自己項目里面,是在是難看的很。而且貌似這些js包耦合性很高,不是我想要的那種,所以還是打算用簡單的md-select、md-option、md-checkbox

來實現(xiàn)我想要的效果,又不想寫的太人工,所以就查angularjs的一些控件demo,最后果然發(fā)現(xiàn)了我想要的。

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",于是,效果出來了,真的是版本原因,容我默默的在衛(wèi)生間哭一會兒。

問題二:樣式的問題解決了,離成功不遠了。想做個多選效果,因為選項實在是很多,沒有多選實在是體驗不好。于是就用其中的一個option來做全選,但是不知道option都有什么事件,找不到相應(yīng)的屬性說明文檔,只有一個checked屬性,但是在js里面又不知道如何判斷checked還是沒有checked,最后還是放棄了,最上面做了個按鈕,搞定。

問題三:還有個問題,就是更新"angular-material": "1.1.3"版本之后,似乎md-input-Container label長度過長的話,就顯示3Dot(...)了,而之前是可以換行顯示的,感覺這個體驗完全不如之前版本的體驗。網(wǎng)上google了好久也沒google出來這樣修正的好處,于是果斷自定義css,改回原來的樣式。

涉及到的部分代碼:

html:

<md-input-container flex="35" class="md-input-has-value"> 
                    <label>產(chǎn)品類型</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; 
} 

相關(guān)文章

最新評論

四川省| 油尖旺区| 大新县| 东阳市| 小金县| 绥芬河市| 惠东县| 永顺县| 台江县| 江安县| 西和县| 丰宁| 巍山| 万荣县| 贵南县| 大同市| 略阳县| 甘肃省| 平舆县| 唐山市| 隆尧县| 台中县| 临沧市| 江源县| 犍为县| 山东省| 柯坪县| 来宾市| 宁化县| 绵阳市| 琼中| 江安县| 湟源县| 金堂县| 吴旗县| 新丰县| 神木县| 和田县| 富裕县| 延津县| 凤山市|