Question

我正在使用Angular用REST数据填充几页，并有一个文章列表，我想要一个链接来显示该文章的文章详细信息。基本上，我需要通过传递给它的routeparam过滤我用于单个文章的REST调用。

它似乎正在按预期传递routeparam，但我遇到一些挑战，让REST调用在我的详细信息页面上工作（articles.html），我怀疑我没有在REST中获取/匹配ID调用routeparam传递的ID。我的第一个REST调用适用于列出所有文章的categories.html页面。我正在使用Angular的ngResource API和$ resource。以下是适用的代码：

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 Call）

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>

Answer 1

经过一番研究，我调整了我的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>

通过$ routeparams过滤REST $资源数据

1 个答案: