Currently, I am facing a challenge while working on an AngularJS app that utilizes JSON data. As a beginner with Angular, I encountered a point of confusion. Here is the issue:
Below is the snippet from the controller:
courseController.controller('LectureController', ['$scope', '$http', function($scope, $http){
$http.get('js/data.json').success(function(data){
$scope.lecture = **data.course[4].lectures**;
$scope.lectureOrder = 'videoId';
});
}]);
Here is the view code (Details.html):
<section class="artistinfo">
<div class="artist cf" ng-model="courses">
<div align="right"><a href="#/details/{{prevItem}}" class="btn btn-left"><</a>
<a href="#/details/{{nextItem}}" class="btn btn-left">></a></div>
<img ng-src="{{courses[whichItem].thumbnail}}" alt="Photo of {{courses[whichItem].name}}">
<h1>{{courses[whichItem].name}}</h1>
<div class="info">
<h3>{{courses[whichItem].description}}</h3>
<div align="right">Lectures: {{courses[whichItem].lectures.length}}</div>
<div align="center">
<a href="#/lectures/{{courses[whichItem].courseId}}">
<button>Get Started</button></div>
</a>
</div>
</div>
<a href="index.html">« Back to search</a>
</section>
The other view code (Lectures.html) is as follows:
<section class="artistpage">
<ul class="artistlist" ng-app>
<li ng-animate="animate'" class="artist cf" ng-repeat="lec in lecture | orderBy: videoId">
<div class="info">
<h2>{{lec.videoName}}</h2>
<h3>{{lec.videoDetails | cut:true:160:' ...'}}</h3>
</div>
</li>
</ul>
</section>
Instead of having a static ID like in data.course[4].lectures, I want to extract a dynamic ID from a button related to the selected course.
For reference, here is the link to the demo: www.faizansaiyed.ml/EduvanceApp