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