【发布时间】：2015-10-13 13:19:36
【问题描述】：
我要做的是显示 json 文件中的内容，这些内容总是不同的，但有多种类型，内容由分章节的页面组成。我有两种访问页面的方法，一个是旁边的菜单，一个是下一个和上一个按钮。
除了通过将{{$index}} 或{{ page.id }} 放入href 以获取URL 来显示内容之外，我没有其他任何办法。 {{ 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 文件中获取他们自己的动态页面中的信息，并能够使用以下命令转到上一页和下一页两个按钮
<!-- next & previous buttons -->
非常感谢任何想法！请务必询问任何缺少的代码。
【问题讨论】：
-
试过 {{ page.id - 1}} ?
-
好吧，当我使用 {{ page.id }} 并单击第一项时，它会在我的 url 中放置一个 4，这将采用数组中的第 5 个对象，它不需要要获得第 4 个，也不需要采用第 4 个，它需要采用 id 等于 url 中的 4 的数组。但我认为这不是解决问题的正确方法。
标签： javascript php jquery angularjs url-routing