gpt4 book ai didi

javascript - 如何在angularJs中显示选中的单选按钮值

转载 作者:行者123 更新时间:2023-12-03 06:37:32 24 4
gpt4 key购买 nike

我需要在响应 div 中显示选定的单选按钮,如果未选择任何选项,则 div 将消失。

View Code:

<body ng-app="QuestionDisplayModule">
<form>
<div ng-controller="QuestionDisplayController">
<div ng-repeat="q in questionsData" style="border:groove 1px green">
<h4 style="color: darkmagenta">{{q.QText}}</h4>
<p ng-repeat="a in q.answer1" style="color: cadetblue"><input type="radio" name="answers" ng-model="options" value="{{a.option1}}" ng-checked="optionselected(options)" />{{a.option1}}</p>
<div>your answer is :{{selectedoption}}</div>
</div>
</div>
</form>
</body>

Script Code:

<script src="~/Scripts/angular.min.js"></script>
<script>
var myApp = angular.module("QuestionDisplayModule", [])
.controller("QuestionDisplayController", function ($scope, $http, $log) {

$scope.optionselected = function (options)
{
$scope.selectedoption = options;
}
$http.get("displayQuestion").then(function(response)
{
$log.info(response);
$scope.questionsData = response.data;
})
})
</script>

最佳答案

您应该为每个问题使用不同的名称,否则您只能为所有问题选择一个选项,并且应该为每个问题使用不同的模型每个问题,并且无需使用ng-checked="optionselected(options)"来设置所选选项值,因为您使用了ng-model .

你可以这样尝试

<div ng-controller="QuestionDisplayController">
<div ng-repeat="q in questionsData" style="border:groove 1px green">
<h4 style="color: darkmagenta">{{q.QText}}</h4>
<p ng-repeat="a in q.answer1" style="color: cadetblue">
<input type="radio" name="answers+{{$parent.$index}}" ng-model="q.selectedAns" value="{{a.option1}}" />{{a.option1}}</p>
<div ng-show="q.selectedAns">your answer is :{{q.selectedAns}}</div>
</div>
</div>

PLUNKER DEMO

关于javascript - 如何在angularJs中显示选中的单选按钮值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38121515/

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