gpt4 book ai didi

javascript - 将用户选择的多个单选按钮选项存储在使用 ng-repeat 构建的 Angular js 中

转载 作者:行者123 更新时间:2023-12-03 07:47:53 25 4
gpt4 key购买 nike

我陷入了一个小问题,我有一堆使用 ng-repeat 从数组的 html 上构建的问题,如下所示,通过单击上一个和下一个按钮,用户可以在问题之间导航。

 <ul>
<li ng-repeat="q in questions">
<h2>{{q.Question}}</h2>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> {{q.isTrue}}
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> {{q.isFalse}}
</label>
</li>
</ul>
<button type="button" class="btn btn-primary" ng-click="prevQuestion()">Prev</button>
<button type="button" class="btn btn-primary" ng-click="nextQuestion()">Next</button>
<button type="submit" class="btn btn-primary"ng-click="onSubmit()">Submit</button>

Controller 代码是

function controller($scope, quizService) {
$scope.questions = [];
updQuestion();

function updQuestion() {
var id = 1;

quizService.getQuestions(id).success(function (data) {
$scope.questions = data;
});

$scope.nextQuestion = function () {
id++;
quizService.getQuestions(id).success(function (data) {
$scope.questions = data;
});
};

$scope.prevQuestion = function () {
id--;
quizService.getQuestions(id).success(function (data) {
$scope.questions = data;
});
}
}
}

和服务代码

 function getQuestions(id) {
return $http.get('/api/quiz/' + id);
}

我的问题是如何在 onSubmit() 上编写,以便它将所有选中/选定的单选选项保存在类似数组的结构中。

我在寻找什么

如果我有 5 个(实际上 5*2)单选按钮用于 5 个问题,我想获取每 5 个问题的选定选项。

谢谢大家。

最佳答案

这是 Angular 方式:

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.questions = [{
Question: "QUESTION 1",
isTrue: "ISTRUE 1",
isFalse: "ISFALSE 1"
},{
Question: "QUESTION 2",
isTrue: "ISTRUE 2",
isFalse: "ISFALSE 2"
},{
Question: "QUESTION 3",
isTrue: "ISTRUE 3",
isFalse: "ISFALSE 3"
},{
Question: "QUESTION 4",
isTrue: "ISTRUE 4",
isFalse: "ISFALSE 4"
}];

$scope.getAnswers = function(){


var answers = $scope.questions.map(function(question){
return question.answer;
});

alert(answers);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="q in questions track by $index">
<h2>{{q.Question}}</h2>
<label class="radio-inline">
<input type="radio" ng-model="q.answer" value="A" name="inlineRadioOptions_{{$index}}" id="inlineRadio1" value="option1">{{q.isTrue}}
</label>
<label class="radio-inline">
<input type="radio" ng-model="q.answer" value="B" name="inlineRadioOptions_{{$index}}" id="inlineRadio2" value="option2">{{q.isFalse}}
</label>
</li>
</ul>
<button ng-click="getAnswers()">GET ANSWERS</button>
{{questions}}
</body>

关于javascript - 将用户选择的多个单选按钮选项存储在使用 ng-repeat 构建的 Angular js 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35132314/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com