我目前正在使用Angular构建我的投资组合。我有 2个控制器和 2个视图/模板:一个显示我的项目列表,另一个显示单个项目。
.controller('ProjectListController', ['$scope', '$http', function($scope, $http){
$http.get('data/projects.json').success(function(projectsRef){
$scope.projects = projectsRef;
$scope.getSlug = function(text){
return text.replace(/\W+/g, '-');
};
});
}])
.controller('ProjectDetailController', ['$scope', '$http', '$routeParams', '$sce', function($scope, $http, $routeParams, $sce){
$http.get('data/projects.json').success(function(projectsRef){
$scope.project = projectsRef[$routeParams.id];
$scope.project = _.find(projectsRef, function(project) {
return project.title.replace(/\W+/g, '-') === $routeParams.id;
});
});
}])
这是我单独进入每个项目的方式
<a class="btn-default" href="#/portfolio/{{getSlug(project.title)}}">View Project</a>
projects.json
{
"001" : {
"keywords" : "Web Design, HTML5, CSS3, jQuery, Responsive, Wordpress",
"title" : "Primetime Learning Centers",
"brief" : "content",
"featured" : "img/screenshots/primetime.jpg",
"shots" : [
{"url" : "img/screenshots/primetime1.jpg"},
{"url" : "img/screenshots/primetime2.jpg"},
{"url" : "img/screenshots/primetime3.jpg"}
]
},
"002" : {
"brief" : "content",
"keywords" : "Web Design, HTML5, CSS3, jQuery, Responsive, Drupal",
"title" : "HIV Stops With me",
"featured" : "img/screenshots/hswm.jpg",
"shots" : [
{"url" : "img/screenshots/hswm5.jpg"},
{"url" : "img/screenshots/hswm6.jpg"},
{"url" : "img/screenshots/hswm7.jpg"}
]
},
"003" : {
"brief" : "content",
"keywords" : "HTML5, CSS3, jQuery, Responsive, Drupal",
"title" : "LGBT China",
"featured" : "img/screenshots/lgbt-china.jpg",
"shots" : [
{"url" : "img/screenshots/china1.jpg"},
{"url" : "img/screenshots/china2.jpg"},
{"url" : "img/screenshots/china3.jpg"}
]
}
}
我一直在尝试在单个项目页面上添加一个显示“下一个”和“上一个”的按钮,该按钮将转到上一个和下一个对象。 我尝试使用$ index和id,但无法弄明白。我有什么想法可以做到吗?
提前致谢!