Angularjs中ng-select和ng-options用法【select聯動資料】
阿新 • • 發佈：2019-01-10
1、使用前景
最近在使用angualr專案中遇到select聯動資料，嘗試了很多次都失敗，終於在查找了很多資料以後解決了問題。
2、介紹ng-select
ng-select用來將資料同HTML的標籤進行繫結。這個指令可以和ng-model以及ng-options指令一起使用，構建精細且表現良好的動態表單。
ng-options的值可以是一個內涵表示式（comprehension
expression），其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者物件，並對她們進行迴圈，將內部的內容提供給select標籤內部的選項。它可以是一下兩種形式。1、陣列作為資料來源
用陣列中的值做標籤。
用陣列中的值作為選中的標籤。
用陣列中的值做標籤組。
用陣列中的值作為選中的標籤組。
2、物件作為資料來源
用物件的鍵-值（key-value）做標籤。
用物件的鍵-值作為選中的標籤。
用物件的鍵-值作為標籤組。
用物件的鍵-值作為選中的標籤組。
3、例項
html程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head> 結果如下：
你會發現，上面的option中的text都是物件，這也很容易理解，因為cities陣列的每一項都是一個物件，繫結的時候將以物件直接繫結上。那麼我們如何只讓它顯示name屬性呢？
<div ng-controller="selectController">
<select ng-model="mycity" ng-options="city.name for city in Cities"></select>
</div>直接點出屬性即可。再檢視下dom數。
值已經顯示出來，但是並不是太完美，因為第一項預設選中的竟然沒有值，那麼接下來我們指定預設值。
$scope.mycity = '北京';加上這句程式碼，並不能解決問題，我們仍需修改ng-options
<select ng-model="mycity" ng-options="city.name as city.name for city in Cities"></select>我們再檢視下dom
這樣就能解決這個問題啦~