Angularjs單選改為多選的開發(fā)過程及問題解析
很簡(jiǎn)單的需求:之前下拉框是單選,現(xiàn)在想改為多選。
開發(fā)過程:
問題一:自己首先想到的是網(wǎng)上找個(gè)example,發(fā)現(xiàn)貌似AngularJS有相應(yīng)的js包來實(shí)現(xiàn),其中最多的就是isteven-multi-select和angularjs-dropdown-multiselect等。
我下載了,但是套到自己項(xiàng)目里面,是在是難看的很。而且貌似這些js包耦合性很高,不是我想要的那種,所以還是打算用簡(jiǎn)單的md-select、md-option、md-checkbox
來實(shí)現(xiàn)我想要的效果,又不想寫的太人工,所以就查angularjs的一些控件demo,最后果然發(fā)現(xiàn)了我想要的。
https://material.angularjs.org/1.1.3/demo/select
于是我就開始往項(xiàng)目里套,但是怎么套,都出不了demo上的樣式,多選是能多選了,但是沒有像checkbox那種正方形選擇框,各種百度各種google,就是不知道什么原因。本來打算都要放棄了,但是這么好的demo,這么省事的js,不忍心放棄啊,再說放棄也找不到其他比較合適的而又不顯突兀的樣式。于是耐下心來一遍遍的去看setting,所有的都沒問題,除了版本不一致。難道?我的第六感告訴我,或許真的是版本原因。之前用的版本是"angular-material": "1.0.0-rc2",改用最新版本"angular-material": "1.1.3",于是,效果出來了,真的是版本原因,容我默默的在衛(wèi)生間哭一會(huì)兒。
問題二:樣式的問題解決了,離成功不遠(yuǎn)了。想做個(gè)多選效果,因?yàn)檫x項(xiàng)實(shí)在是很多,沒有多選實(shí)在是體驗(yàn)不好。于是就用其中的一個(gè)option來做全選,但是不知道option都有什么事件,找不到相應(yīng)的屬性說明文檔,只有一個(gè)checked屬性,但是在js里面又不知道如何判斷checked還是沒有checked,最后還是放棄了,最上面做了個(gè)按鈕,搞定。
問題三:還有個(gè)問題,就是更新"angular-material": "1.1.3"版本之后,似乎md-input-Container label長度過長的話,就顯示3Dot(...)了,而之前是可以換行顯示的,感覺這個(gè)體驗(yàn)完全不如之前版本的體驗(yàn)。網(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;
}
- 利用VS Code開發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序
- AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開發(fā)代碼量】
- 基于NodeJS+MongoDB+AngularJS+Bootstrap開發(fā)書店案例分析
- AngularJS開發(fā)教程之控制器之間的通信方法分析
- Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
- 總結(jié)AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤
- 利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
- AngularJS應(yīng)用開發(fā)思維之依賴注入3
- angularJS開發(fā)注意事項(xiàng)
相關(guān)文章
AngularJS驗(yàn)證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗(yàn)證信息框架的封裝插件用法,分析了AngularJS表單驗(yàn)證規(guī)則并實(shí)例說明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法,結(jié)合實(shí)例形式分析了ng-app自動(dòng)加載我們自定義的模塊作為根模塊的操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
angularJS?實(shí)現(xiàn)長按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法
這篇文章主要為大家介紹了angularJS實(shí)現(xiàn)長按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
AngularJS使用ng-app自動(dòng)加載bootstrap框架問題分析
這篇文章主要介紹了AngularJS使用ng-app自動(dòng)加載bootstrap框架問題,分析了前面文章中所述的ng-app自動(dòng)加載bootstrap出現(xiàn)的錯(cuò)誤原因與相應(yīng)的解決方法,需要的朋友可以參考下2017-01-01
div實(shí)現(xiàn)自適應(yīng)高度的textarea實(shí)現(xiàn)angular雙向綁定
本文主要介紹了div實(shí)現(xiàn)自適應(yīng)高度的textarea,實(shí)現(xiàn)angular雙向綁定的方法。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01
實(shí)例詳解AngularJS實(shí)現(xiàn)無限級(jí)聯(lián)動(dòng)菜單
這篇文章主要介紹了實(shí)例詳解AngularJS實(shí)現(xiàn)無限級(jí)聯(lián)動(dòng)菜單的相關(guān)資料,需要的朋友可以參考下2016-01-01
Angular搜索場(chǎng)景中使用rxjs的操作符處理思路
這篇文章主要介紹了Angular搜索場(chǎng)景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件,這樣就可以使用rxjs的各種操作符,可以快捷很多。需要的朋友可以參考下2018-05-05
angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce)
這篇文章主要介紹了angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01

