快捷導(dǎo)航

AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼

更新時(shí)間：2017年06月21日 10:08:57 作者：XINGXUEXX

本篇文章主要介紹了AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

什么情況下會(huì)需要?jiǎng)討B(tài)綁定 ng-model 呢？若你的數(shù)據(jù)結(jié)構(gòu)長(zhǎng)得像是下面這樣：

var Classes = [
{
"Name" : "溫度 " ,
"Options" : [ "Cold" , "Hot" , "Normal" ]},
{
"Name" : "份量 " ,
"Options" : [ "Big" , "Middle" , "Small" ]}
];

此時(shí)你需要用 ng-repeat 將數(shù)據(jù)展開，并且將 Options 個(gè)別設(shè)置為 ng-options 的數(shù)據(jù)，此時(shí)就須要?jiǎng)討B(tài)去綁定 ng-model，那么該如何綁呢？你可能需要在你的 Controller 底下加上一個(gè)變量來做這些動(dòng)態(tài)呈現(xiàn)的 ng-options 的數(shù)據(jù)指定。

說的這么抽象，不如馬上來看下吧。

<!-- DOM -->
<div class ="container">
<div ng-repeat= "class in classes">
{{className}}
<select ng-model="SelectdCollection[className]" ng-options="option for option in classOptions" ></select>

</div>
<a class="btn btn-success" ng-click= "submit()">送出 </a> 
</div>


// Javascript
function DemoController($scope){
$scopeclasses = [
{
"Name": "溫度 ",
"Options" : ["Cold" , "Hot", "Normal"]
},
{

"Name": "份量 ",
"Options" : ["Big" , "Middle" , "Small" ]
}
];
$scopeSelectdCollection = {};
$scopesubmit = function() {
console log($scope SelectdCollection);

};
}

在這一小段程序代碼中，我們?cè)?DemoController 里面宣告了 $scope.SelectdCollection，這就是剛才提到的承接動(dòng)態(tài) ng-model 值的對(duì)象，這邊定義了一個(gè)按鈕，按下之后可以及時(shí)把動(dòng)態(tài)呈現(xiàn)的 ng-options 所選的值丟到開發(fā)者工具的 console 去。

實(shí)際畫面會(huì)是長(zhǎng)這樣。

按下送出可以在開發(fā)者工具看到如下的 log，成功取得資料。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS中的緩存使用
一個(gè)緩存就是一個(gè)組件，它可以透明地儲(chǔ)存數(shù)據(jù)，以便以后可以更快地服務(wù)于請(qǐng)求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。
2017-01-01
AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析
這篇文章主要介紹了AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法,結(jié)合HTML5實(shí)例形式對(duì)比分析了AngularJS圖片上傳的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-11-11
Angular中使用Intersection Observer API實(shí)現(xiàn)無限滾動(dòng)效果
這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無限滾動(dòng),實(shí)現(xiàn)原理為在data下面加一個(gè)loading元素如果此元素進(jìn)入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面,這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧
2023-12-12
Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件
這篇文章主要為大家介紹了Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
AngularJS指令用法詳解
這篇文章主要介紹了AngularJS指令用法,較為詳細(xì)的分析了AngularJS指令的功能、用法及自定義指令的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-11-11
AngularJS HTML DOM詳解及示例代碼
本文主要介紹AngularJS HTML DOM基礎(chǔ)知識(shí)，這里整理了相關(guān)資料和示例代碼進(jìn)行詳解，有需要的小伙伴可以參考下
2016-08-08
Angular 如何使用第三方庫(kù)的方法
本篇文章主要介紹了Angular 如何使用第三方庫(kù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
這篇文章主要介紹了AngularJS中的作用域,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS涉及作用域的相關(guān)問題與注意事項(xiàng),需要的朋友可以參考下
2018-05-05