Hi mahesh213,
Check with below sample.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
List<Question> questions = new List<Question>();
questions.Add(new Question { QId = 1, QName = "question#1" });
questions.Add(new Question { QId = 2, QName = "question#2" });
questions.Add(new Question { QId = 3, QName = "question#3" });
List<QuestionOptions> questionOptions = new List<QuestionOptions>();
questionOptions.Add(new QuestionOptions { QopId = 1, QId = 1, Options = "answer#1" });
questionOptions.Add(new QuestionOptions { QopId = 2, QId = 1, Options = "answer#2" });
questionOptions.Add(new QuestionOptions { QopId = 3, QId = 1, Options = "answer#3" });
questionOptions.Add(new QuestionOptions { QopId = 4, QId = 2, Options = "answer#4" });
questionOptions.Add(new QuestionOptions { QopId = 5, QId = 2, Options = "answer#5" });
questionOptions.Add(new QuestionOptions { QopId = 6, QId = 2, Options = "answer#6" });
questionOptions.Add(new QuestionOptions { QopId = 7, QId = 3, Options = "answer#7" });
questionOptions.Add(new QuestionOptions { QopId = 8, QId = 3, Options = "answer#8" });
questionOptions.Add(new QuestionOptions { QopId = 9, QId = 3, Options = "answer#9" });
List<QuizModel> CO = new List<QuizModel>();
var cust = questions.OrderBy(a => a.QId).ToList();
foreach (var i in cust)
{
var orders = questionOptions.Where(a => a.QId.Equals(i.QId)).OrderBy(a => a.QopId).ToList();
CO.Add(new QuizModel
{
Questions = i,
Questionoptions = orders
});
}
return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public class Question
{
public int QId { get; set; }
public string QName { get; set; }
public string IsSelected { get; set; }
}
public class QuestionOptions
{
public int QopId { get; set; }
public int QId { get; set; }
public string Options { get; set; }
}
public class QuizModel
{
public Question Questions { get; set; }
public List<QuestionOptions> Questionoptions { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('surveyApp', []);
app.controller('surveyCtrl', function ($scope, $http) {
$scope.Data = [];
$scope.questionSet = [];
$scope.Index = 0;
$http({
method: 'Get',
url: '/Home/GetData'
}).then(function (result) {
$scope.Data = result.data;
for (var i = 0; i < $scope.Data.length; i++) {
if (i < $scope.Index + 1) {
$scope.questionSet.push($scope.Data[i]);
}
}
});
$scope.NextPrev = function (nextprev) {
if (nextprev == 'next') {
$scope.Index = $scope.Index + 1;
} else if (nextprev == 'prev') {
$scope.Index = $scope.Index - 1;
}
$scope.questionSet = [];
for (var i = 0; i < $scope.Data.length; i++) {
if (i >= $scope.Index) {
if (i < $scope.Index + 1) {
$scope.questionSet.push($scope.Data[i]);
}
}
}
}
$scope.Percentage = 0;
$scope.Select = function () {
$scope.Answered = 0;
for (i = 0; i < $scope.Data.length; i++) {
if ($scope.Data[i].Questions.IsSelected != null) {
$scope.Answered += 1;
}
}
$scope.Percentage = Math.round(parseInt(100) - ((parseInt($scope.Data.length - $scope.Answered)
/ parseInt($scope.Data.length)) * parseInt(100)));
}
});
</script>
<div class="container" ng-app="surveyApp" ng-controller="surveyCtrl">
<div ng-repeat="questionSet in questionSet">
{{questionSet.Questions.QId}}.{{questionSet.Questions.QName}}
<form action="">
<div ng-repeat="options in questionSet.Questionoptions" style="display: inline;">
<input type="radio" name="gender" ng-model="questionSet.Questions.IsSelected" ng-value="options.Options"
ng-click="Select()">
{{options.Options}}
</div>
</form>
</div>
<br />
<button type="button" ng-click="NextPrev('prev')" ng-disabled="Index == 0">Previous</button>
<button type="button" ng-click="NextPrev('next')" ng-disabled="Index == questionSet.length+1">Next</button>
<hr />
<div ng-style="{'width' : '100%','background-color':'#E9E9E9' }">
<div ng-style="{'width' : Percentage+'%','background-color':'#337AB7','text-align': 'center' }">
<span style="color: White;">{{Percentage}}%</span>
</div>
</div>
</div>
</body>
</html>
Screenshot
