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

開發(fā)過(guò)程：

問(wèn)題一：自己首先想到的是網(wǎng)上找個(gè)example，發(fā)現(xiàn)貌似AngularJS有相應(yīng)的js包來(lái)實(shí)現(xiàn)，其中最多的就是isteven-multi-select和angularjs-dropdown-multiselect等。

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

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

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

于是我就開始往項(xiàng)目里套，但是怎么套，都出不了demo上的樣式，多選是能多選了，但是沒有像checkbox那種正方形選擇框，各種百度各種google，就是不知道什么原因。本來(lái)打算都要放棄了，但是這么好的demo，這么省事的js，不忍心放棄啊，再說(shuō)放棄也找不到其他比較合適的而又不顯突兀的樣式。于是耐下心來(lái)一遍遍的去看setting，所有的都沒問(wèn)題，除了版本不一致。難道？我的第六感告訴我，或許真的是版本原因。之前用的版本是"angular-material": "1.0.0-rc2",改用最新版本"angular-material": "1.1.3",于是，效果出來(lái)了，真的是版本原因，容我默默的在衛(wèi)生間哭一會(huì)兒。

問(wèn)題二：樣式的問(wèn)題解決了，離成功不遠(yuǎn)了。想做個(gè)多選效果，因?yàn)檫x項(xiàng)實(shí)在是很多，沒有多選實(shí)在是體驗(yàn)不好。于是就用其中的一個(gè)option來(lái)做全選，但是不知道option都有什么事件，找不到相應(yīng)的屬性說(shuō)明文檔，只有一個(gè)checked屬性，但是在js里面又不知道如何判斷checked還是沒有checked，最后還是放棄了，最上面做了個(gè)按鈕，搞定。

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

涉及到的部分代碼：

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>