如何通过每JSON文件加载帖子浏览

Question

这里是我的Plnkr：http://plnkr.co/edit/brWn6r4UvLnNY5gcFF2X?p=preview

比如我有一个JSON文件：

{ 
    "info": { 
    "test1": "test", 
    "teste2": "test" 
    }, 

    "posts": [ 
     { 
     "name": "lorem ipsum", 
     "content": "sit amet lorem ipsum" 
     }, 
     { 
     "name": "Ipsum lorem", 
     "content": "sit amet lorem ipsum" 
     }, 
     { 
     "name": "lorem ipsum", 
     "content": "sit amet lorem ipsum" 
     }, 
     { 
     "name": "Sit amet", 
     "content": "sit amet lorem ipsum" 
     } 
    ] 
} 

在我的控制器：

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

app.controller('MainCtrl', function($scope, $http, $route, $routeParams, $filter) { 
    $scope.name = 'Teste'; 

    $scope.getData = function(){ 
    $http.get('posts.json') 
     .then(function(res){ 
      $scope.posts = res.data.posts; 
      $scope.currentPost = $filter('filter')($scope.posts, {id: $routeParams.id}) 
      //console.log(res.data.posts); 
     }); 
    }; 
    //setInterval($scope.getData, 1000); 
    $scope.getData(); 
}); 

// Routes 
app.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
    templateUrl: 'home.html', 
    controller: 'MainCtrl', 
    }) 
    .when('/posts/:id', { 
    templateUrl: 'post.html', 
    controller: 'MainCtrl' 
    }) 
    .otherwise({ redirectTo: '/' }); 

}); 

在我主页视图：

<div ng-repeat="post in posts"> 
<a href="./#/posts/{{ post.id }}"> 
    <h3>{{ post.name }}</h3> 
    <h5>=> {{ post.content }}</h5> 
</a> 
</div> 

和我的帖子视图：

<h6><a href="./#/">Back</a></h6> 

<h1>POST ID: {{ currentPost.id }}</h1> 
<h2>Name: {{ currentPost.name }}</h2> 
<h3>Content: {{ currentPost.content }}</h3> 

我在加载帖子视图时没有获取值。

谢谢！

Answer 1

与此修复：

app.controller('MainCtrl', function($scope, $http, $route, $routeParams, $filter) { 
    $scope.name = 'Test'; 

    $scope.getData = function(){ 
    $http.get('posts.json') 
     .then(function(res){ 
      $scope.posts = res.data.posts; 
      $scope.currentPost = $filter('filter')($scope.posts, {id: $routeParams.id}); 
      $scope.currentPost = $scope.currentPost[0]; // $filter apparently returns an array... 
     }); 
    }; 
    setInterval($scope.getData, 1000); 

    $scope.getData(); 

}); 

Plnkr更新：http://plnkr.co/edit/brWn6r4UvLnNY5gcFF2X?p=preview

Answer 2

第一名，你应该添加一些标识符像id财产上的每个岗位，所以，虽然导航到该职位，你可以有id在URL &然后使用ng-href与interpolation形成导航网址

HTML

<div ng-repeat="post in posts> 
    <a ng-href="/post/{{post.id}}" > 
    <h1>{{ post.name }}</h1> 
    <h1>{{ post.content }}</h1> 
    </a> 
</div> 

编辑

要在帖子页面上显示帖子，您可以使用URL中的该参数，使用$routeParams服务&然后对接收到的数据进行过滤，然后在HTML上显示它。

app.controller('PostsController', function($scope, $http, $routeParams, $filter) { 
     $scope.getData = function(){ 
      $http.get('json/posts.json') 
      .then(function(res){ 
       //for sec of simplicity you could add this data in service. 
       $scope.posts = res.data.posts; 
       $scope.currentPost = $filter('filter')($scope.posts, {id: $routeParams.id}); 
      }); 
     }; 
     $scope.getData(); //init 
}); 

的意见/ post.html

<div> 
    <div> Post with id {{currentPost.id}}</div> 
    <div> Name: {{currentPost.name}}</div> 
    <div> Content: {{currentPost.content}}</div> 
</div>