我要做的是显示来自json文件的内容，此内容总是不同但有几种类型，内容由章节中分隔的页面组成。我有2种方法可以访问页面，旁边的菜单以及下一个和上一个按钮。
通过在{{$index}}中添加{{ page.id }}或href来获取内容，我没有进一步展示内容。 {{ page.id }}无法正常工作，因为控制器将获取此数字并在数组中使用它，如果第1项的ID为4，则取第5项。
所以，这就是我所拥有的。
控制器：
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>
我在此下面有ng-view来显示实际内容。
Project.json（由projectController使用）
{
"id": 1,
"name": "Test Project 1",
"description": "test test",
"company_id": 2,
"cover_image": null,
"time_to_complete": 1140,
"custom_css": "",
"chapters": [{
"id": 3,
"name": "Chapter 1",
"pages": [{
"id": 4,
"name": "MultipleChoice",
"question": {
"id": 6,
"page_id": 4,
"type": "multiplechoice"
}
}, {
"id": 5,
"name": "Boolean",
"question": {
"id": 7,
"page_id": 5,
"type": "boolean"
}
}, {
"id": 25,
"name": "Imagewithtext",
"content": {
"id": 14,
"page_id": 25,
"type": "imagewithtext"
}
}, {
"id": 26,
"name": "Quote",
"content": {
"id": 15,
"page_id": 26,
"type": "quote"
}
}]
}, {
"id": 7,
"name": "Chapter 2",
"pages": [{
"id": 30,
"name": "Page 1",
"question": {
"id": 8,
"page_id": 30,
"type": "open"
}
}, {
"id": 116,
"name": "Page 4"
}]
}]
}
pages.json（这由chapterController和pageController使用）
[
{
"id": 4,
"name": "MultipleChoice",
"chapter_id": 3,
"question": {
"id": 6,
"page_id": 4,
"type": "multiplechoice",
"correct_answer": 1,
"name": "Question MultipleChoice Page 1",
"description": "Description MultipleChoice Page 1",
"possible_answers": [{
"value": 1,
"answer": "answer1 test"
}, {
"value": 2,
"answer": "answer2 test"
}, {
"value": 3,
"answer": "answer3 test"
}],
"user_answer": null,
"correct": false
}
},
{
"id": 5,
"name": "Boolean",
"chapter_id": 3,
"question": {
"id": 7,
"page_id": 5,
"type": "boolean",
"correct_answer": 0,
"name": "Question Test Page 2",
"description": "Xcode uses information from the General, Capabilities, and Info tabs of your project to generate an information property list (Info.plist)",
"user_answer": null,
"correct": false
}
},
{
"id": 25,
"name": "Imagewithtext",
"chapter_id": 3,
"content": {
"id": 14,
"page_id": 25,
"type": "imagewithtext",
"title": "Page Image with text Test Page 8",
"text": "Bricks are heavy",
"image_url": "http://www.fingus.ru",
"viewed": null
}
},
{
"id": 26,
"name": "Quote",
"chapter_id": 3,
"content": {
"id": 15,
"page_id": 26,
"type": "quote",
"quote": "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Donec id elit non mi porta!",
"author": "Title Quote Test Page 9",
"viewed": null
}
},
{
"id": 30,
"name": "Page 1",
"chapter_id": 7,
"question": {
"id": 8,
"page_id": 30,
"type": "open",
"correct_answer": null,
"name": "Question Test Open Page 1",
"description": "Description Test Open Page 1",
"user_answer": "",
"correct": true
}
},
{
"id": 116,
"name": "Page 4",
"chapter_id": 7
}
是否可以查看2章中的所有6个页面，并且能够点击这些页面从.json文件中获取自己的动态页面中的信息，并且能够转到上一页和下一页2个按钮
<!-- next & previous buttons -->
非常感谢任何想法！请查询任何遗漏的密码。
答案 0 :(得分：0)
您的数组丢失，为所有数据创建数组。
<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>