Okay let me be honest as i am a beginner in angular i am not sure how to frame this question i will try my best to explain this question.
As you see in the above pic i have a situation where I have a list of classes, and each class will have no of sections under it. you can see a blue button on each row on clicking which i need to know which 'section' was selected.
This is the problem statement.
Now here is the HTML I have for this
<table class="table table-hover">
<tbody>
<tr>
<th>Syllabus</th>
<th>{{phrase.className}}</th>
<th>Select Section</th>
<th>{{phrase.Operations}}</th>
</tr>
<tr ng-repeat="class in classes| filter:searchText">
<td id="syl">
<span ng-repeat="(sid, syllabi) in syllabus" ng-if="sid == class.classAcademicYear">
{{ syllabi.yearTitle}}
</span>
</td>
<td id="cls">{{class.className}}</td>
<td id="sec">
<div class="form-group">
<select class="form-control" name="student_section" ng-model="selectedSection">
<option ng-selected='class.sections[$index].id' ng-repeat="(key, section) in class.sections" value="{{section.id}}">{{section.sectionName}}</option>
</select>
</div>
</td>
<td id="vew">
<button ng-click="edit(class.id)" type="button" class="btn btn-info btn-flat" title="{{phrase.ReadSchedule}}" tooltip><i class="fa fa-fw fa-th-list"></i></button>
</td>
</tr>
<tr ng-show="!classes.length">
<td class="noTableData" colspan="3">{{phrase.NoClasses}}</td>
</tr>
</tbody>
</table>
Here we see a nseted ng-repeat where i am creating table rows based on the list of classes, now this class object also holds the section object inside as you can see inner ng-repeat uses that classes.sections to iterate the options
Now the classes json object is as shown below
[{
"id": 11,
"className": "Class-1 (STATE)",
"classAcademicYear": 2,
"classSubjects": "[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\"]",
"dormitoryId": null,
"sections": [{
"id": 11,
"sectionName": "Section -1 (STATE)",
"sectionTitle": "section title -1",
"classId": 11,
"teacherId": "[\"10\",\"11\",\"12\",\"13\",\"14\",\"15\"]"
}]
}, {
"id": 12,
"className": "Class-2",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 12,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 12,
"teacherId": "[\"0\"]"
}]
}, {
"id": 13,
"className": "Class-3",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 13,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 13,
"teacherId": "[\"0\"]"
}]
}, {
"id": 14,
"className": "Class-4",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 14,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 14,
"teacherId": "[\"0\"]"
}]
}]
What I am trying to do is set a ng-model for the inner select dropdown element that is dynamic , something like below so that every time the section is selected i can set the blue button action to whatever section id is.
ng-model="selectedSection[class.id]"
which is not working.
I know this might not be sufficient information but if some one is interested to help solve me this i can share further details.
For checking what ng-repeat line was selected you should send values $index and $parent.$index (if you have nested ng-repeat).
<button ng-click="edit($index, $parent.$index)" type="button">
Does it help?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.