Angularjs單選改為多選的示例分析

這篇文章主要介紹了Angularjs單選改為多選的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

開發過程：

問題一：自己首先想到的是網上找個example，發現貌似AngularJS有相應的js包來實現，其中最多的就是isteven-multi-select和angularjs-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單選改為多選的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!