AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法
更新時(shí)間：2018年02月28日 09:59:53 作者：清風(fēng)晴雨
下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述：
在我們開發(fā)項(xiàng)目過程中，避免不了會(huì)用到select下拉框，那么在angular中如何使用select呢？
解決方案：
可以用ng-options來動(dòng)態(tài)加載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":"片區(qū)管理員"},{"id":4,"name":"系統(tǒng)管理員"},{"id":5,"name":"銷售市場經(jīng)理"}]
這樣出現(xiàn)了空白選項(xiàng)：
那么我們對代碼進(jìn)行簡單調(diào)整：
<select ng-model="role_id1" ng-options="o.id as o.name for o in list5"></select>
成功了！！
兩者的差別在于：兩張圖的value是不同的，最開始的value是一個(gè)對象，而后面的value是一個(gè)id值，這與ng-model的綁定值有直接關(guān)系。
以上這篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
angular是Google開發(fā)的一個(gè)單頁面應(yīng)用框架,是現(xiàn)在比較主流的單頁面應(yīng)用框架之一，下面通過本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
AngularJS基礎(chǔ) ng-value 指令簡單示例
本文主要介紹AngularJS ng-value 指令,這里對ng-value 的基礎(chǔ)資料做了整理，并附實(shí)例代碼，有需要的小伙伴可以參考下2016-08-08
AngularJS實(shí)現(xiàn)頁面定時(shí)刷新
本篇文章主要介紹了AngularJS實(shí)現(xiàn)頁面定時(shí)刷新，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
AngularJS動(dòng)態(tài)生成div的ID源碼解析
這篇文章主要介紹了基于AngularJS動(dòng)態(tài)生成div的ID,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，對angularjs動(dòng)態(tài)生成div的id相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-08-08
Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法
這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法，文中給出了詳細(xì)的介紹和示例代碼，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-02-02
下面小編就為大家?guī)硪黄獪\談Angular中ngModel的$render。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
AngularJS遞歸指令實(shí)現(xiàn)Tree View效果示例
這篇文章主要介紹了AngularJS遞歸指令實(shí)現(xiàn)Tree View效果,結(jié)合實(shí)例形式分析了AngularJS基于遞歸指令實(shí)現(xiàn)樹形結(jié)構(gòu)層次數(shù)據(jù)的相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下2016-11-11
Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
這篇文章主要介紹了angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
今天小編就為大家分享一篇Angular4 Select選擇改變事件的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS中的API（接口）簡單實(shí)現(xiàn)
本文主要介紹AngularJS API（接口）,這里對AngularJS API的知識做了詳細(xì)講解,并附簡單代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07