AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼
什么情況下會(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í)有所幫助,也希望大家多多支持腳本之家。
- 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)頁(yè)body的背景色實(shí)例代碼
- JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁(yè)面實(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)文章
AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析
這篇文章主要介紹了AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法,結(jié)合HTML5實(shí)例形式對(duì)比分析了AngularJS圖片上傳的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11Angular中使用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-12Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件
這篇文章主要為大家介紹了Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05

Angular6使用forRoot() 注冊(cè)單一實(shí)例服務(wù)問題