如何从Angular中的当前对象获取上一个和下一个对象?

时间:2015-11-18 23:52:43

标签: json angularjs angularjs-ng-repeat ng-repeat

我目前正在使用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,但无法弄明白。我有什么想法可以做到吗?

提前致谢!

0 个答案:

没有答案