javascript - ng-Table 点击表格标题时出现表格内容

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();
});