Hey everyone, I am encountering an issue with ng-repeat and need some help with the following code snippet.
Basically, I am trying to display all the data in three steps:
1. Displaying the name using ng-repeat-start.
2. Showing the questions with ng-repeat.
3. Displaying the answers using ng-repeat again.
The problem I am facing is that after implementing ng-repeat for displaying answers, the name and questions are not showing up. How can I resolve this and display all the data correctly?
1. Name/Title // currently not showing => should be displayed
2. The Questions // currently not showing => should be displayed
3. Answers => 1 2 3 4 5 // currently showing
Thanks
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.instructors = [{
id: 1,
name:"A",
questions:[
{"ask":"what is apple?"},
{"ask":"what is apple1?"},
{"ask":"what is apple2?"}
]
}, {
id: 2,
name:"B",
questions:[
{"ask":"what is pier?"},
{"ask":"what is pier1?"},
{"ask":"what is pier2?"}
]
}
, {
id: 3,
results:[
1,2,3,4,5,6,7,8,9,10
]
}
];
} table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<table class="table table-striped table-border">
<tr ng-repeat-start="DataQuest in instructors">
<tr ng-repeat="a in DataQuest.questions">
<tr ng-repeat="b in DataQuest.results track by $index">
<td ng-if="!$first"></td>
<td ng-if="$first">{{DataQuest.name}}</td>
<td>{{$index + 1}}</td>
<td>{{a.ask}}</td>
<td>{{b}}</td>
<td>{{b}}</td>
<td>{{b}}</td>
<td>{{b}}</td>
<td>{{b}}</td>
<tr ng-repeat-end></tr>
</tr></tr>
</table>
</div>
</div>