通過$ routeparams篩選REST $資源數據

我正在使用Angular用REST數據填充幾頁，並且列出了我希望鏈接顯示該文章的文章詳細信息的文章。基本上，我需要通過傳遞給它的routeparam過濾用於單個文章的REST調用。

它似乎正在按照預期傳遞routeparam，但我有一些挑戰讓REST調用在我的詳細信息頁面（articles.html）上工作，並且我懷疑我沒有獲得/匹配我的ID REST調用由routeparam傳遞的ID。我的第一個REST調用適用於列出所有文章的categories.html頁面。我在$ resource中使用Angular的ngResource API。這裏是適用的代碼：

app.js（路由）

var pfcModule = angular.module('pfcModule', ['ngRoute', 'pfcServices', 'pfcControllers']); 

pfcModule.config(['$routeProvider', function ($routeProvider) { 
$routeProvider. 
    when('/home', { templateUrl: './views/home.html'}). 
    when('/categories', { templateUrl: './views/categories.html', controller: 'pfcCtrl' }). 
    when('/articles/:articleID', { templateUrl: './views/articles.html', controller: 'pfcCtrl2' }). 
    otherwise({ redirectTo: '/home' }); 
}]);

services.js（REST調用）

var pfcServices = angular.module('pfcServices', ['ngResource']) 

pfcServices.factory('pfcArticles', ['$resource', 
    function($resource){ 
     return $resource('https://pfc.azure-mobile.net/tables/articles/:articleID', {}); 
    }]);

controllers.js（控制器）

var pfcControllers = angular.module('pfcControllers', []); 

pfcControllers.controller('pfcCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) { 
$scope.data = pfcArticles.query(); 
}]); 

pfcControllers.controller('pfcCtrl2', ['$scope', '$routeParams', 'pfcArticles', function ($scope, $routeParams, pfcArticles) { 
$scope.data2 = pfcArticles.get({ articleID: $routeParams.articleID }); 
}]);

categories.html（部分，按預期工作）

<div class="row"> 
<div class="col-md-4"> 
    <h2>Heading</h2> 
    <table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Title</th> 
      <th>Category ID</th> 
      <th>Link</th> 
     </tr> 
     <tr ng-repeat="article in data"> 
      <td>{{article.id}}</td> 
      <td>{{article.articletitle}}</td> 
      <td>{{article.articlecategoryid}}</td> 
      <td><a href="#articles/{{article.id}}">Link</a></td> 
     </tr> 
    </table> 
</div>

articles.html（部分，不工作，我希望它由routeparam傳遞的ID過濾）

<div class="row"> 
<div class="col-md-4"> 
    <h2>Heading</h2> 
    <table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Title</th> 
      <th>Category ID</th> 
      <th>Summary</th> 
     </tr> 
     <tr ng-repeat="article in data2"> 
      <td>{{article.id}}</td> 
      <td>{{article.articletitle}}</td> 
      <td>{{article.articlecategoryid}}</td> 
      <td>{{article.articlesummary}}</td> 
     </tr> 
    </table> 
</div>

來源

2014-12-02 Kode

一些經過研究，我調整articles.html偏偏沒有重複如下，而且正在工作：

<div class="row"> 
<div class="col-md-4"> 
    <h2>Heading</h2> 
    <table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Title</th> 
      <th>Category ID</th> 
      <th>Summary</th> 
     </tr> 
     <tr> 
      <td>{{data2.id}}</td> 
      <td>{{data2.articletitle}}</td> 
      <td>{{data2.articlecategoryid}}</td> 
      <td>{{data2.articlesummary}}</td> 
     </tr> 
    </table> 
</div>

來源

2014-12-02 22:22:00 Kode

通過$ routeparams篩選REST $資源數據

回答

相關問題