首頁 >web前端 >js教程 >在AngularJS中使用select載入資料選取預設值的方法該怎麼處理?

在AngularJS中使用select載入資料選取預設值的方法該怎麼處理?

亚连
亚连原創
2018-06-02 17:36:142187瀏覽

下面我就為大家分享一篇AngularJS select載入資料選取預設值的方法,具有很好的參考價值,希望對大家有幫助。

問題描述:

在我們開發專案過程中,避免不了會用到select下拉框,那麼在angular中如何使用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":"销售市场经理"}]

這樣出現了空白選項:

##那麼我們對程式碼進行簡單調整:

<select ng-model="role_id1" ng-options="o.id as o.name for o in list5"></select>

#成功了! !

兩者的差異在於:兩張圖的value是不同的,最開始的value是一個對象,而後面的value是一個id值,這與ng -model的綁定值有直接關係。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

vue 實作複製內容到貼上簿clipboard的方法

vue取得目前啟動路由的方法

vue 每次渲染完頁面後div的捲軸保持在最底部的方法

#

以上是在AngularJS中使用select載入資料選取預設值的方法該怎麼處理?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn