angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
最近在做項(xiàng)目的過(guò)程中，要求做一個(gè)考試系統(tǒng)，在答題頁(yè)面涉及到單選框+ng-repeat來(lái)實(shí)現(xiàn)試卷的展示，做完后將答案?jìng)鞯胶笈_(tái)，在這里主要講下單選框+ng-repeat的幾個(gè)要點(diǎn)
前臺(tái)代碼如下：
<div class="container" width="1900px" data-ng-controller="QuestionSettingCtrl"> <div class="text-center" data-ng-repeat="item in items"> <table> <tr><td data-ng-bind="$index+1 +'、 '+item.test" colSpan="4"></td></tr> <tr><td> </td></tr> <tr> <td><input type="radio" value="A" data-ng-model="answer[$index]" />A <span data-ng-bind="item.op1"></span> </td> <td><input type="radio" value="B" data-ng-model="answer[$index]" />B <span data-ng-bind="item.op2"></span> </td> <td><input type="radio" value="C" data-ng-model="answer[$index]" />C <span data-ng-bind="item.op3"></span> </td> <td><input type="radio" value="D" data-ng-model="answer[$index]" />D <span data-ng-bind="item.op4"></span> </td> </tr> </table> <br> <br> </div> <div class="text-center"><button class="btn btn-primary" style="margin: 0 auto;" data-ng-click="submit()">提交</button></div> <br><br><br><br> </div>
注意到在一組radio中，使用的ng-model是一樣的，原理與name類似，ng-model的值與js的數(shù)組直接綁定(通過(guò)$index來(lái)確定具體綁定到哪個(gè) )。
js代碼如下：
app.controller('QuestionSettingCtrl',function($scope, $http){
$scope.answer = new Array(30);
$http({
url : "/getexamquestions",
method : "post",
params : {
'account' : 30
}
}).success(function(res){
$scope.items=res;
});
$scope.submit = function(){
$http({
url : "/submitanswer",
method : "post",
params : {
'answer' : $scope.answer
}
}).success(function(res){
alert("你做對(duì)了"+res+"題!");
});
}
});
我在controller的初始化中就創(chuàng)建了answer數(shù)組，與html中的radio雙向綁定，在submit方法中，直接提交到后臺(tái)就能夠完成答案的比對(duì)。
以上這篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Angular 6創(chuàng)建各種動(dòng)畫(huà)效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動(dòng)畫(huà)。我們將通過(guò)本文學(xué)習(xí)到如何使用Angular 6來(lái)創(chuàng)建各種動(dòng)畫(huà)效果。在此，我們將使用Visual Studio Code來(lái)進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
Angular實(shí)現(xiàn)雙向折疊列表組件的示例代碼
本篇文章主要介紹了Angular實(shí)現(xiàn)雙向折疊列表組件的示例代碼，分為左右兩組，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
AngularJS使用ngOption實(shí)現(xiàn)下拉列表的實(shí)例代碼
這篇文章主要介紹了AngularJS使用ngOption實(shí)現(xiàn)下拉列表的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-01-01
AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復(fù)雜的一個(gè)部分，但是這也是其比較好玩的地方。這篇文章我們就來(lái)說(shuō)一說(shuō)如何在我們自定義的指令中，利用ngModel的controller來(lái)做雙向數(shù)據(jù)綁定，本文對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。2016-10-10
這篇文章主要為大家詳細(xì)介紹了Angular的$http與$location，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12![AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]](http://img.jbzj.com/images/xgimg/bcimg5.png)
AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下2017-01-01
ngrx是一套利用RxJS的類庫(kù)，下面這篇文章主要給大家介紹了關(guān)于Angular X中使用ngrx的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Angular6 寫(xiě)一個(gè)簡(jiǎn)單的Select組件示例
這篇文章主要介紹了Angular6寫(xiě)一個(gè)簡(jiǎn)單的Select組件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例（debounce）
這篇文章主要介紹了angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例（debounce）,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10