ionic2 三級聯(lián)動地址選擇

一,環(huán)境搭建。

ionic環(huán)境搭建比較麻煩,建議新手不要隨便在網上找一個教程就開始搭建環(huán)境,很容易出錯,并且一旦出錯會很麻煩,所以,謹慎!

二,廢話不多少,來看三級聯(lián)動地址選擇。首先準備地址數(shù)據(jù)包,網上很多,我的數(shù)據(jù)包格式如下:


三,1,進入你的ionic項目文件夾,運行ionic g provider local-service(服務名稱)創(chuàng)建服務。目錄結構providers文件夾下面會出下local-service.ts文件。


2,local-service.ts代碼部分


這里我請求了存放在assets/data文件夾中的city-data.json文件,使用的是rxjs的方法。之后的component中將調用服務的setAll()函數(shù)。

3,person.ts代碼部分

獲取地址數(shù)據(jù)賦值給all,并調用setProvincess()篩選省份信息。setProvincess()函數(shù)見下圖。


setCity()篩選城市信息。

篩選地區(qū)信息,并保存在result數(shù)組

最后重置地址信息。selectProvince()是一個響應函數(shù),在每次重新選擇省時,都需要重置城市選擇器和地區(qū)選擇器。


html代碼部分


省選擇器的select值改變selectProvince(aaa)函數(shù),這函數(shù)可以篩選出后續(xù)的城市信息,重點要強調的是城市選擇器和地區(qū)選擇器中的[(ngModel)],由于每次重新選擇前面一個選擇器時,都需要將后面的選擇器進行重置,所以這里使用數(shù)據(jù)的雙向綁定的方法,進行選擇器的重置,只要將其中的值置為undefined,就可以使選擇器重置。

這個組件的原理大致就是這樣子,寫的有點粗糙,原理我也不是很清楚但效果實現(xiàn)了,折磨了我好久的三級聯(lián)動終于搞定,希望有收幫助,發(fā)現(xiàn)錯誤希望糾正。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容