2017-09-02 8 views
1

json形式のデータがあり、HTMLページで表示するには$ routeParamsを使用しましたが、jsonファイルからデータを取得できません。 私はこのようなコントローラを作成しました:

angular.module('app.controllers', [ 
    'app.directives' 
]) 
    .controller('PostController', ['$scope', '$http', function ($scope, $http){ 
     $http.get('data/posts.json').then(function (data) { 
      $scope.posts = data.data; 
     }); 
    }]) 
    .controller('SinglePostController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) { 
     $http.get('data/posts.json').then(function (data){ 
      $scope.post = data[$routeParams.id]; 
     }); 
    }]); 

をし、設定は次のとおりです。データをフェッチする必要があり

angular.module('app', [ 
    'ngRoute', 
    'app.controllers' 
]) 
    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider.when('/',{ 
      templateUrl : 'views/post.html', 
      controller : 'PostController' 
     }).when('/post/:id', { 
      templateUrl: 'views/singlepost.html', 
      controller: 'SinglePostController' 
     }).otherwise({ 
      redirectTo : '/' 
     }); 
    }]); 

htmlページは次のとおりです。

<h1>{{post.title}}</h1> 
<p>{{post.content}}</p> 

ヘルプ!

+0

あなたは、HTML内のデータをループされない前に、スコープ変数を宣言する必要があるかもしれませんか? – user2085143

+0

はい、データをループしています! –

+0

あなたは助けるつもりですか? –

答えて

1

あなたはhttp.getすなわち

.controller('SinglePostController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) { 
     $scope.post = {}; 
     $http.get('data/posts.json').then(function (data){ 
      $scope.post = data.data[$routeParams.id]; 
     }); 
関連する問題