模擬iOS選擇器做的城市三級聯動：ionic-citypicker

描述:

模擬iOS選擇器做的城市三級聯動，僅測試過iOS沒問題。

插件基于ionic中ion-scroll

效果圖

:

安裝:

git clone https://github.com/minh8023/ionic-citypicker

下載所有文件放到lib目錄下

引入文件

在index.html文件中引入style.css, ionic-citypicker.js,ionic-citydata.js

<link href="lib/ionic-citypicker/src/style.css" rel="stylesheet">
<script src="lib/ionic-citypicker/src/ionic-citypicker.js"></script>
<script src="lib/ionic-citypicker/src/ionic-citydata.js"></script>

在app.js里寫入文件依賴

angular.module('myApp', ['ionic-citydata','ionic-citypicker']);

需要城市選擇的地方寫入

<ionic-city-picker placeholder="出發城市" tag="-" backdrop=true backdrop-click-to-close=false css-class="xxx" okText="確定" citydata="citydata"  button-clicked="vm.cb()" ></ionic-city-picker>

一些配置

• placeholderstring input的placeholder屬性 默認“請選擇城市”

• tag：城市之間的分割符號 默認“－”

• okTextstring 按鈕名稱 默認“確定”

• buttonClickedexpression 點擊“確定”后的回調函數 默認無（為了有效能使用，backdropClickToClose屬性請設置為false）

• backdropClickToCloseboolean 點擊空白出關閉窗口 默認“flase”

• citydatastring 城市數據綁定 全局在“ionic-city-picker”上不要重復否則會出錯

• cssClassstring 自定義自己的class

• barCssClassstring 自定義自己的bar class

• backdropboolean 遮罩層 默認“true” 呃最好別false

項目主頁：http://www.baiduhome.net/lib/view/home/1444569801889