AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法
更新時間：2018年02月28日 09:59:53 作者：清風(fēng)晴雨
下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述：
在我們開發(fā)項目過程中，避免不了會用到select下拉框，那么在angular中如何使用select呢？
解決方案：
可以用ng-options來動態(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)了空白選項：
那么我們對代碼進(jìn)行簡單調(diào)整：
<select ng-model="role_id1" ng-options="o.id as o.name for o in list5"></select>
成功了??！
兩者的差別在于：兩張圖的value是不同的，最開始的value是一個對象，而后面的value是一個id值，這與ng-model的綁定值有直接關(guān)系。
以上這篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Angular管道PIPE的相關(guān)資料,管道的作用就是傳輸,并且不同的管道具有不同的作用,需要的朋友可以參考下2021-06-06
用WebStorm進(jìn)行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式)
這篇文章主要介紹了用WebStorm進(jìn)行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
微信小程序?qū)崿F(xiàn)左右聯(lián)動的實戰(zhàn)記錄
聯(lián)動菜單是大家在開發(fā)小程序經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左右聯(lián)動的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了什么是 AngularJS？AngularJS簡介,本文講解了AngularJS方方面面的基礎(chǔ)知識,AngularJS 是一個為動態(tài)WEB應(yīng)用設(shè)計的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了AngularJS 限定$scope的范圍實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
上拉加載，是目前手機(jī)網(wǎng)站加載數(shù)據(jù)的一種常用方式，本文主要講解AnglarJs集成，上拉加載功能。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
本篇文章主要介紹了AngularJS中的按需加載ocLazyLoad，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
這篇文章主要介紹了Angular 組件之間的交互的示例代碼，根據(jù)數(shù)據(jù)的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過服務(wù)傳遞三種交互方法。非常具有實用價值，需要的朋友可以參考下2018-03-03
Angular ui.bootstrap.pagination分頁
這篇文章主要為大家詳細(xì)介紹了Angular ui.bootstrap.pagination 分頁的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01