How to iterate over an array in angular js
As an ng-repeat
array in angular, I want to draw gpa
in my view.
[
{
"id": 1,
"name": "Pre-Algebra",
"selected": true,
"gpa": [
{
"grade_date": null,
"grade_type": null,
"grade_percent": null,
"letter_grade": null
},
{
"grade_date": null,
"grade_type": null,
"grade_percent": null,
"letter_grade": null
}
]
},
{
"id": 2,
"name": "Pre-Calculus",
"selected": true
}
]
View code:
<div ng-repeat="course in ctrl.subjectCourseGrades| filter: {selected : true} track by $index">
<table class="academy-table gpa-table" ng-class="!ctrl.editAcademyToggle?'data-view':''">
<tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
<td>
<b>Id is : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
</td>
</tr>
</table>
</div>
Where am I going wrong?
+3
source to share
2 answers
You don't need to use $index
ngRepeat in your expression
Using
<tr ng-repeat="gpa in course.gpa"
instead
<tr ng-repeat="gpa in course.gpa[$index]"
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
this.subjectCourseGrades = [{
"id": 1,
"name": "Pre-Algebra",
"selected": true,
"gpa": [{
"grade_date": null,
"grade_type": null,
"grade_percent": null,
"letter_grade": null
},
{
"grade_date": null,
"grade_type": null,
"grade_percent": null,
"letter_grade": null
}
]
}];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
<div ng-repeat="course in ctrl.subjectCourseGrades | filter: {selected : true} track by $index">
<table class="academy-table gpa-table">
<tr ng-repeat="gpa in course.gpa" class="ots-data">
<td>
<b>Id is : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
+4
source to share
Remove $index
from ng-repeat
<tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
<td>
<b>Id is : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
</td>
</tr>
Edit1: After searching for your question, it appears that you are using a controller instead of $ scope. You need it:
<tr ng-repeat="gpa in ctrl.course.gpa"></tr>
Edit 2: div is not a valid table element. This may be the reason for inoperability. Use dark.
<tbody ng-repeat="course in ctrl.subjectCourseGrades| filter: {selected : true} track by $index">
<tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
<td>
<b>Id is : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
</td>
</tr>
+1
source to share