angular 實現(xiàn)下拉列表組件的示例代碼
更新時間：2019年03月09日 15:38:04 作者：陳杰
這篇文章主要介紹了angular 實現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
需求：
方案一
最開始就是用最簡單的方法，前臺請求數(shù)據(jù)，然后通過select和option在頁面上顯示，但是寫了一會兒發(fā)現(xiàn)出現(xiàn)了許多類似下面的重復的代碼：
// 初始化年級選項
initGradeOptions() {
this.gradeService.getAll().subscribe((res) => {
this.gradeOptions = res;
}, () => {
console.log('get gradeOption error');
});
}
<nz-select nzPlaceHolder="請選擇所屬年級" formControlName="grade">
<nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name"
[nzValue]="grade"></nz-option>
</nz-select>
每寫一個列表都要寫請求它的數(shù)據(jù)的方法和模板中的內(nèi)容，非常繁瑣。
方案二
因為在項目中，不止一個地方用到了這樣的列表，所以就想著把這些列表單獨拿出來，寫成組件。
這里就參考了樸世超組長的angular的輸入與輸出寫了這個組件
思路大概如下：
ts:
@Input() defaultValue: Grade; // 選中的值
@Output() selected = new EventEmitter<number>(); // 輸出屬性
datas: Grade[]; // 所有數(shù)據(jù)
constructor(private gradeService: GradeService) {
}
// 請求所有的數(shù)據(jù)
ngOnInit() {
this.gradeService.getAll().subscribe((res) => {
this.datas = res;
}, () => {
console.log('error');
});
}
// 當則內(nèi)容更改時，將已選中對象的id彈射到父組件綁定的事件上
dataChange() {
this.selected.emit(this.defaultValue);
}
html:
<nz-select nzPlaceHolder="所屬年級" class="wide" [(ngModel)]="defaultValue" (ngModelChange)="dataChange()">
<nz-option *ngFor="let data of datas" [nzLabel]="data.name"
[nzValue]="data"></nz-option>
</nz-select>
ps: 默認選中的功能還在完善，待更新
思考
當我照著上面的套路繼續(xù)寫collegeList,majorList,klassList，以后還會有teacherList,studentList等等，這樣不也形成了很多重復的代碼嗎？
于是我就想能不能設計一個組件：
我讓它是什么列表，它就是什么列表。
然后我就尋找這幾個組件的共性，發(fā)現(xiàn)它們請求數(shù)據(jù)的的特點：
- 都是使用get請求
- 返回的數(shù)據(jù)都是數(shù)組
- url只有最后一項不同
那么，我只要傳給組件一個url數(shù)組，就能根據(jù)url請求對應的數(shù)據(jù)，再生成相應的模板
方案三(失敗)
子組件ts:
@Input() urls: String[][] = []; // 保存?zhèn)鬟f過來的url
datas: String[][] = []; // 保存查詢結(jié)果
@Input() titles: String[][] = []; // 保存提示語句
@Output() selectItems = new EventEmitter(); // 已選中的對象
index = 0;
items = [];
constructor(public dataService: DataService) {
}
ngOnInit() {
this.getData(this.index);
}
getData(index: number): void {
if (index < this.urls.length) {
const url = this.urls[index];
this.dataService.getAllData(url).subscribe((res) => {
this.datas[index] = res;
console.log(this.datas);
}, () => {
console.log('error');
});
}
}
dataChange(i: number) {
console.log(this.items);
this.selectItems.emit(this.items);
this.getData(i + 1);
}
子組件html:
<nz-select [nzPlaceHolder]="titles[i]"
style="width: 150px;"
(ngModelChange)="dataChange(i)"
[(ngModel)]="items[i]"
*ngFor="let url of urls,let i = index">
<nz-option *ngFor="let item of datas[i]" [nzValue]="item" [nzLabel]="item.name">
</nz-option>
</nz-select>
父組件ts:
url = ['Grade', 'College', 'Major'];
titels = ['年級', '學院', '專業(yè)'];
getSelectItems(event) {
console.log(event);
}
父組件html:
<app-grade-list
[urls]="url"
[titles]="titels"
(selectItems)="getSelectItems($event)">
</app-grade-list>
效果：
看起來還能用，但是再往后寫就發(fā)現(xiàn)這樣寫有致命的缺陷。
- 每一個下拉框都是根據(jù)url生成的，使用時
需要查找url - 傳給父組件的數(shù)據(jù)
不知道數(shù)據(jù)與實體的對應關(guān)系 - 當存在級聯(lián)時，使用該方案難度高，且
不易維護。
總結(jié)
雖然這些下拉列表有一定的共性，并且可以抽象出一些公共的功能來實現(xiàn)，但本身設計略復雜，且使用效果并不好，最后還是放棄了第三個方案。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS前端頁面操作之用戶修改密碼功能,結(jié)合具體實例形式分析了AngularJS針對前端用戶修改密碼的判斷操作實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
本篇文章給大家介紹在angularjs中自定義一個有關(guān)表格的directive，涉及到angularjs directive相關(guān)知識，對本文感興趣的朋友一起學習吧2016-01-01
本文主要介紹AngularJS ng-app 指令，這里整理了ng-app指令的一些資料，并附實例代碼，有需要的小伙伴可以參考下2016-07-07
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對Angular進行單元測試的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了angular手寫樹形二級表格的完整代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
AngularJS基礎 ng-model 指令詳解及示例代碼
本文主要介紹AngularJS ng-model 指令,這里幫大家整理了ng-model的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08
本文主要介紹AngularJS 表單,這里對AngularJS 表單知識做了詳細整理介紹,希望能幫助有需要的小伙伴2016-07-07
這篇文章主要和大家一起學習Angularjs分頁指令，代碼很詳細，文章結(jié)構(gòu)緊湊，感興趣的小伙伴們可以參考一下2016-07-07
Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
這篇文章主要介紹了Angular實現(xiàn)的敏感文字自動過濾與提示功能,結(jié)合實例形式分析了AngularJS針對字符串的輸入判定及實時顯示相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請求通過消息體傳遞參數(shù)的方法,結(jié)合實例形式分析了$http使用post請求傳遞參數(shù)的相關(guān)設置與使用技巧,需要的朋友可以參考下2016-08-08