很簡單的需求：之前下拉框是單選，現在想改為多選。

開發過程：

問題一：自己首先想到的是網上找個example，發現貌似AngularJS有相應的js包來實現，其中最多的就是isteven-multi-select和angularjs-dropdown-multiselect等。

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

來實現我想要的效果，又不想寫的太人工，所以就查angularjs的一些控件demo，最后果然發現了我想要的。

問題二：樣式的問題解決了，離成功不遠了。想做個多選效果，因為選項實在是很多，沒有多選實在是體驗不好。于是就用其中的一個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; }