Javascript 通过随机id'；s和Angularjs

我要做的是显示json文件中的内容，这些内容总是不同的，但有几种类型，内容是由章节分开的页面组成的。我有两种进入页面的方式，一个旁白菜单和一个下一个和上一个按钮

除了通过将

{{$index}}

或

{{{page.id}}

放在

href

中以进入URL来显示内容之外，我没有任何其他方法<代码>{page.id}将不起作用，因为控制器将获取此数字并在数组中使用它，如果第一项的id为4，则获取第五项

这就是我得到的

控制器：

app.controller('projectController', ['$scope', '$route', 'projects', function($scope, $route, projects) {
  projects.success(function(data) {
    $scope.projects = data;
  });

app.controller('chapterController', ['$scope', 'pages', '$routeParams', '$location', function($scope, pages, $routeParams, $location) {
  pages.success(function(data) {
    $scope.pages = data;
      console.log(data);
  });
    $scope.$location = $location;
}]);

app.controller('pageController', ['$scope', 'pages', '$routeParams', '$location', function($scope, pages, $routeParams, $location) {
  pages.success(function(data) {
    $scope.pages = data[$routeParams.id];
    console.log(data[$routeParams.id]);

  });
    $scope.$location = $location;
}]);

app.js：

var app = angular.module('brcks', ['ngRoute']);

angular.module('brcks')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

app.config(function ($routeProvider) { 
  $routeProvider
    .when('/page/:id/type/video', {
        templateUrl: 'partials/video.html'
    })
    .when('/page/:id/type/text', {
        controller: 'pageController',
        templateUrl: 'partials/text.html'
    })
    .when('/page/:id/type/title', {
        controller: 'pageController',
        templateUrl: 'partials/title.html'
    })
    .when('/page/:id/type/image', {
        controller: 'pageController',
        templateUrl: 'partials/img.html'
    })
    .when('/page/:id/type/multiplechoice', {
        controller: 'pageController',
        templateUrl: 'partials/multi.html'
    })
    .when('/page/:id/type/boolean', {
        controller: 'pageController',
        templateUrl: 'partials/boolean.html'
    })
    .when('/page/:id/type/imagewithtext', {
        controller: 'pageController',
        templateUrl: 'partials/imgtext.html'
    })
    .when('/page/:id/type/quote', {
        controller: 'pageController',
        templateUrl: 'partials/quote.html'
    })
    .when('/page/:id/type/', {
        controller: 'pageController',
        templateUrl: 'partials/universal.html'
    })
});

.php文件的部分内容：

<!-- dropdown menu -->
    <div id="aside" class="col-xs-12 col-sm-4 col-md-3 aside" ng-controller="projectController">
        <div class="wrapper">
            <ul class="shadowdiv">
                <li><p><b>Index</b><img src="assets/images/icon-close.svg" onClick="hide()" class="close"></p>
                    <div class="scrollable">
                        <ul ng-repeat="project in projects.chapters">
                            <li class="chapters"><p><b>{{ project.name | uppercase }}</b></p>
                                <ul>
                                    <li ng-repeat="page in project.pages"><a href="#/page/{{ page.id }}/type/{{ page.content.type }}{{ page.question.type }}"><p><b>Question {{ $index + 1 }}: </b>{{ page.name }}</p></a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
      </div>

<!-- next & previous buttons -->
        <div id="controls" ng-controller="chapterController">
           <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="next">
              <img src="assets/images/icon-next.svg">
           </div></a>
           <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="prev">
              <img src="assets/images/icon-prev.svg">
           </div></a>
        </div>

}

json（由chapterController和pageController使用）

]

是否有可能看到这两章中的所有6个页面，并能够单击这些页面以从.json文件中获取自己的动态页面中的信息，并且能够使用2个按钮转到上一页和下一页

<!-- next & previous buttons -->

---

非常感谢您的任何想法！请务必询问任何缺失的代码。

您的数组缺失，正在为所有数据创建数组

 <div> ng-repeat="page in pages track by $index"
        <div id="controls" ng-controller="chapterController">
               <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="next">
                  <img src="assets/images/icon-next.svg">
               </div></a>
               <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="prev">
                  <img src="assets/images/icon-prev.svg">
               </div></a>
            </div>
    </div>

ng repeat=“页面中的页面按$index跟踪”

trusted{{page.id-1}}？好吧，当我使用{{page.id}并单击第一个项目时，它会在我的url中放置一个4，它将接受数组中的第5个对象，它不需要接受第4个，也不需要接受第4个，它需要接受id等于url中的4的数组。但我认为这不是解决问题的正确方法。按钮放在主php文件中，而不是视图中。我现在已经把它放到视图中，并修改了一些。不过还是有问题。我会马上编辑并显示我的更改。

<!-- next & previous buttons -->

 <div> ng-repeat="page in pages track by $index"
        <div id="controls" ng-controller="chapterController">
               <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="next">
                  <img src="assets/images/icon-next.svg">
               </div></a>
               <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="prev">
                  <img src="assets/images/icon-prev.svg">
               </div></a>
            </div>
    </div>