AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼
什么情況下會(huì)需要?jiǎng)討B(tài)綁定 ng-model 呢？若你的數(shù)據(jù)結(jié)構(gòu)長得像是下面這樣：
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ì)是長這樣。
按下送出可以在開發(fā)者工具看到如下的 log，成功取得資料。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JS中注入eval, Function等系統(tǒng)函數(shù)截獲動(dòng)態(tài)代碼
- JS點(diǎn)擊動(dòng)態(tài)添加標(biāo)簽、刪除指定標(biāo)簽的代碼
- vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的實(shí)現(xiàn)代碼
- 動(dòng)態(tài)加載、移除js/css文件的示例代碼
- JS動(dòng)態(tài)修改網(wǎng)頁body的背景色實(shí)例代碼
- JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁面實(shí)現(xiàn)代碼
- Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果及實(shí)現(xiàn)代碼
- 微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼
- 如何基于JS截獲動(dòng)態(tài)代碼
相關(guān)文章
angular源碼學(xué)習(xí)第一篇 setupModuleLoader方法
這篇文章主要介紹了angular源碼學(xué)習(xí)第一篇，setupModuleLoader方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了angularjs路由傳值$routeParams的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
AngularJS入門教程之 XMLHttpRequest實(shí)例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關(guān)資料并提供實(shí)例代碼,有需要的小伙伴參考下2016-07-07
AngularJS數(shù)據(jù)源的多種獲取方式匯總
在AngularJS中獲取數(shù)據(jù)源的方式有很多種，本文給大家整理幾種獲取數(shù)據(jù)源的方式，對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了Angularjs中使用輪播圖指令swiper的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2017-05-05
解決Angular.js中使用Swiper插件不能滑動(dòng)的問題
下面小編就為大家分享一篇解決Angular.js中使用Swiper插件不能滑動(dòng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在AngularJs中設(shè)置請(qǐng)求頭信息(headers)的方法及不同方法的比較
在AngularJs中有三種方式可以設(shè)置請(qǐng)求頭信息，文中對(duì)每種方法給大家介紹的非常詳細(xì)，選擇那種方式可以根據(jù)自己的需求，感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-09
angular-ngSanitize模塊-$sanitize服務(wù)詳解
本篇文章主要介紹了angular-ngSanitize模塊-$sanitize服務(wù)詳解 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
淺談angularjs依賴服務(wù)注入寫法的注意點(diǎn)
下面小編就為大家?guī)硪黄獪\談angularjs依賴服務(wù)注入寫法的注意點(diǎn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
angularjs客戶端實(shí)現(xiàn)壓縮圖片文件并上傳實(shí)例
這篇文章主要介紹了angularjs客戶端實(shí)現(xiàn)壓縮圖片文件并上傳實(shí)例,本文直接給出代碼實(shí)例,需要的朋友可以參考下2015-07-07