从嵌套的JSON检索数据并使用AngularJS显示列表

Question

我目前正在使用AngularJS和JSON数据开发应用程序，但遇到了困难。 我也是Angular的新手。 这里是：

控制器代码段：

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';
    });
}]);

并且视图是：（Details.html）

<section class="artistinfo">
  <div class="artist cf" ng-model="courses">
    <div align="right"><a href="#/details/{{prevItem}}" class="btn btn-left">&lt;</a>
    <a href="#/details/{{nextItem}}" class="btn btn-left">&gt;</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">&laquo; Back to search</a>
</section>

（Lectures.html）

<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>

我想从所选课程的按钮获取动态ID，而不是像data.course [ 4 ] .lectures那样获取静态ID。

JSON：

那我该怎么做呢？ 演示： www.faizansaiyed.ml/EduvanceApp

Answer 1

我想你会做这样的事情：

$http.get('js/data.json').success(function(data) {
    $scope.records = data;
    $scope.whichItem = $routeParams.itemId;

并在您的html文件中，您可以这样做：

第一个html文件

<a href="#details/{{records.indexOf(item)}}" >

对于第二个html文件，您将执行此操作：例如，类似这样的操作：

<div class="col s12 error_info_box" ng-repeat="item in records[whichItem].errors">

      <p><b>Error Type&#58;</b>&nbsp;&nbsp;{{item.type}}</p>






      </div>