這篇文章主要介紹了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單選改為多選的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯建站，關注創新互聯網站建設公司行業資訊頻道，更多相關知識等著你來學習!

另外有需要云服務器可以了解下創新互聯建站vcdvsql.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章名稱：Angularjs單選改為多選的示例分析-創新互聯
新聞來源：http://vcdvsql.cn/article36/csecsg.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、面包屑導航、網站建設、企業網站制作、網站改版、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯