In my current project, I am developing a django-tastypie api application with angularjs as the JavaScript framework. The main part of this application involves managing curriculum objects, each containing a list of grade objects and each grade object further containing a list of subjects. Here is an example of my data structure:
{'id':1,
'name':'cbse',
'grades':[{'id':10,
'name':'matriculation',
'subjects':[
{'id':1,'name':'science'},
{'id':2,'name':'Math'},
{'id':3,'name':'English'}
]
}
I have structured my data in such a way that each object carries its related objects. My goal is to display these objects in select boxes so that selecting one object dynamically loads the related objects in other select fields. For example, choosing a curriculum from the dropdown should populate the grades select options with the corresponding data. However, I encountered an issue where the curriculum select box becomes empty after selection.
Here is a snippet of my HTML code:
<label>Select Curriculum</label>
<select ng-model="qt_curriculumlist" ng-options=" curriculum.name for curriculum in qt_curriculumlist" ng-change="loadGrades()">
</select></br>
<label>Select Grade</label>
<select ng-model="qt_gradeslist" ng-options="grade.name for grade in qt_gradelist " ng-change="loadSubjects()">
</select>
<label>Select Subject</label>
<select ng-model="qt_syllabuslist" ng-options="subject.name for subject in qt_subject_list" ng-change="loadTopics()">
</select>
Initially, the curriculum options load correctly in the select field, but upon selecting an option, the list becomes empty.