Javascript 单击表格标题时会显示ng表格内容

我正在用AngularJS实现一个小的音乐请求web应用程序。请求的标题显示在ng表格中，该表格应能够排序

.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>

当标记如下所示时：

    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>

{{musicrequest.artist}
{{musicrequest.title}
{{musicrequest.guest}

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

当它看起来像这样时：

    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>

{{musicrequest.artist}
{{musicrequest.title}
{{musicrequest.guest}

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

---

我做错了什么？

我猜$scope.musicrequests是空的，因为可能有对服务器的挂起请求

尝试添加：

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

---

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

如果使用var orderedData=params.sorting（），该怎么办$过滤器（'orderBy'）（$scope.musicrequests，params.orderBy（））：$scope.musicrequests？