I am working on a project that involves three connected select menus.
The first one displays series names,
the second one displays chapter numbers belonging to the series selected in the first menu,
and the third one displays page numbers belonging to the chapter selected in the second menu.
Currently, I am trying to set selected values for the first and second select menus based on the data stored in $scope.data. While I have successfully managed to set the first select menu, I'm encountering issues with setting the second menu due to mismatches in JSON data. Using track by solves this problem but then I'm unable to use as. How can I resolve this dilemma?
<select ng-model="selManga" ng-options="manga.seri for manga in mangalar track by manga.seri">
<option value="">Manga</option>
</select>
<select ng-change="selPage = 0" ng-model="selChapter" ng-options="selManga.randomword.indexOf(chapter) as chapter.klasor for chapter in selManga.randomword">
<option value="">Chapter</option>
</select>
<select ng-model="selPage" ng-options="selManga.randomword[selChapter].yol.indexOf(page) as selManga.randomword[selChapter].yol.indexOf(page) + 1 for page in selManga.randomword[selChapter].yol">
</select>
<img ng-src="{{selManga.randomword[selChapter].yol[selPage]}}" ng-click="next(selManga, selChapter, selPage)">
Javascript:
$scope.mangalar = loHemen; //JSON Data
$scope.selManga = miloMangaInArray; // First select menu's ng-model and it works fine.
$scope.selChapter = $scope.selManga.randomword[a]; // Issue arises with the second select menu due to misaligned JSON data.
JSON Data:
[{"seri": "Naruto",
"randomword": [{
"klasor": "138",
"yol": [path/to/images
]
},
{
"klasor": "300",
"yol": [path/to/images
]
}
]
},
{
"seri": "One Piece",
"randomword": [
{
"klasor": "137",
"yol": [path/to/images
]
}
]
}
])