Question

我正在使用AngularJS实现一个小型音乐请求Web应用程序。请求的标题显示在应该能够排序的ng-Table中。

.js文件如下所示：

    var musicApp = angular.module('musicRequests', ['ngResource', 'ngTable']);
    musicApp.controller('MusicRequestsController', ['$scope', 'Music', '$filter', 'ngTableParams', function($scope, Music, $filter, ngTableParams) {
        $scope.musicrequests = Music.query();
        var data = $scope.musicrequests;

        $scope.addRequest = function(newRequest){
            $scope.newMusicRequest = new Music();
            Music.save(newRequest)
            musicrequests.push(newRequest);
        }
        $scope.tableParams = new ngTableParams({
            page: 1, 
            count: 10,
            sorting: {
                name: 'asc'
            }
        }, 
        {
            total: data.length,
            getData: function($defer, params) {
                var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
    }]);

    musicApp.factory('Music', ['$resource', function($resource) { 
    return $resource('/musicrequests', {}, {
        query: { method: 'GET', isArray: true },

    }); 
}]);

当标记看起来像这样：

<table class="table table-stiped" ng-table="tableParams">
    <tr ng-repeat="musicrequest in musicrequests">
        <td data-title="'Artist'" sortable="'artist'">{{ musicrequest.artist }}</td>
        <td data-title="'Title'" sortable="'title'">{{ musicrequest.title }}</td>
        <td data-title="'Guest'" sortable="'guest'">{{ musicrequest.guest }}</td>
    </tr>
</table>

表格内容已呈现，但不可排序。

看起来像这样：

<table class="table table-stiped" ng-table="tableParams">
    <tr ng-repeat="musicrequest in $data">
        <td data-title="'Artist'" sortable="'artist'">{{ musicrequest.artist }}</td>
        <td data-title="'Title'" sortable="'title'">{{ musicrequest.title }}</td>
        <td data-title="'Guest'" sortable="'guest'">{{ musicrequest.guest }}</td>
    </tr>
</table>

表格内容是可排序的，但是当页面加载时，表格最初是空白的。单击标题时，将显示内容并可对其进行排序。

我做错了什么？

Answer 1

我的猜测是$ scope.musicrequests是空的，因为可能有一个待处理的服务器请求。

尝试添加：

$scope.$watch('musicrequests', function () {
  $scope.tableParams.reload();
});

Answer 2

我发现，排序部分中的参数名称应与显示的值（艺术家，标题，来宾）匹配，不应该是名称。

单击表标题时出现ng-Table表内容

2 个答案: