最近在工作遇到一個問題，項目是用angularjs做的。
項目有一個需求是需要編輯資料，資料中有一個地方是有下拉框的。學藝不精的在下，在開始想到的是直接將給div添加ng-model，HTML代碼如下：
1 <select ng-model="role_id1" ng-model="role_id"> 2 <option value="">--請選擇--</option> 3 <option value="1">系統管理員</option> 4 <option value="2">片區管理員</option> 5 <option value="3">終端代表</option> 6 </select>
接着，問題就來了，在頁面中顯示的時候，並沒有選中之前load進來的數據，而是會有一個空白選項。
然後，換了個辦法，用ng-value給select賦值，然後在option中用ng-selected="{{role_id}}==1"這樣的方式來判斷是否選中，這次，空白項是沒有了，但是還是沒有選中我要的那個option啊！
代碼如下：
1 <select ng-value="role_id1" > 2 <option value="">--請選擇--</option> 3 <option value="1" ng-selected="{{role_id1}}==1">系統管理員</option> 4 <option value="2" ng-selected="{{role_id1}}==2">片區管理員</option> 5 <option value="3" ng-selected="{{role_id1}}==3">終端代表</option> 6 </select>
結果如圖：
沒辦法，又要換一個辦法了。怎麼辦呢？突然想到是不是可以用ng-options來動態加載option,然後在用ng-model來匹配呢？想做就做！代碼如下：
//html
<select ng-model="role_id1" ng-options="o.name for o in list5"></select>
//js
$scope.list5 = [{"id":2,"name":"終端代表"},{"id":3,"name":"片區管理員"},{"id":4,"name":"系統管理員"},{"id":5,"name":"銷售市場經理"}]
這次呢，又回到了開始你的樣子：出現了空白選項:
不過這一次，總算是讓我看到了和最開始的差別在哪：兩張圖的value是不同的，最開始的value是一個值，而後面的value是一個對象，問題會不會出在這裏呢？然後我嘗試將ng-options改了一下：
<select ng-model="role_id1" ng-options="o.id as o.name for o in list5"></select>
天可憐見！終於成功了！！
我想來想去，只能認爲是這樣的：在最開始的時候，ng-model其實是有賦值給select的，只是賦值的方式是一個對象，也就是"value=?number:4?"這樣，而option中沒有與之對應的值，所以沒有被默認選中；然後之後的ng-selected爲什麼也沒有選中呢？我認爲是因爲在dom加載的時候，option中的ng-selected="{{role_id1}}==1"這樣是有錯誤的，在dom加載時，{{role_id1}}是沒有值的，所以ng-selected的值都沒有等於true，因此沒有選中；而最後，ng-options用的是as...for...這種形式，將option的value設置爲“number:3”這種形式，與ng-model的值的形式是對應的，所以ng-model能找到對應值，因此才選中。
以上是一點拙見，如有錯誤還請大家指出。