Angular ng-repeat orderBy不工作答案

【问题标题】：Angular ng-repeat orderBy not workingAngular ng-repeat orderBy不工作
【发布时间】：2016-01-26 11:45:06
【问题描述】：

您好，我从 YouTube api 中提取了显示频道信息的数据。这是 JSON 的示例

channels: {
    UCxxxxxxxxxxx: {
        channelId: "xxxx",
        channelTitle: "xxxx",
        description: "xxxx",
        channelId: "xxxx",
        title: "xxxx"
    },
    UCxxxxxxxxxxx: {
        channelId: "xxxx",
        channelTitle: "xxxx",
        description: "xxxx",
        channelId: "xxxx",
        title: "xxxx"
    }
}

我已将channels 对象传递给$scope.results

我刚刚从控制器内部的角度文档中复制了示例

    $scope.predicate = 'title';
    $scope.reverse = true;
    $scope.order = function(predicate) {
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
    };

这里是html标记

        <table>
            <thead>
                <tr>
                    <a href="" ng-click="order('title')">Name</a>
                    <span class="sortorder" ng-show="predicate === 'title'" ng-class="{reverse:reverse}"></span>
                </tr>
                <tr>
                    <a href="" ng-click="order('channelTitle')">Channel</a>
                    <span class="sortorder" ng-show="predicate === 'channelTitle'" ng-class="{reverse:reverse}"></span>
                </tr>
                <tr>
                    <a href="" ng-click="order('viewCount')">Views</a>
                    <span class="sortorder" ng-show="predicate === 'viewCount'" ng-class="{reverse:reverse}"></span>
                </tr>
                <tr>
                    <a href="" ng-click="order('subscriberCount')">Subscribers</a>
                    <span class="sortorder" ng-show="predicate === 'subscriberCount'" ng-class="{reverse:reverse}"></span>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="result in results | orderBy:predicate:reverse">
                    <td ng-bind="result.title"></td>
                    <td>
                        <a ng-show="result.channelTitle" href="https://www.youtube.com/channel/{{result.channelId}}" ng-bind="result.channelTitle"></a>
                        <div ng-show="!result.channelTitle" ng-bind="'--'"><div>
                    </td>
                    <td ng-bind="result.info.viewCount | number"></td>
                    <td ng-bind="result.info.subscriberCount | number"></td>
                </tr>
            </tbody>
        </table>

当我单击表头时，没有错误。所以我无法完全弄清楚什么不起作用。任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： javascript angularjs youtube-api youtube-data-api

【解决方案1】：

您的对象（用于 ng-repeat）与原始示例（https://docs.angularjs.org/api/ng/filter/orderBy）不同。

channels: {
    UCxxxxxxxxxxx: {
        channelId: "xxxx",
        channelTitle: "xxxx",
        description: "xxxx",
        channelId: "xxxx",
        title: "xxxx"
    },
    UCxxxxxxxxxxx: {
        channelId: "xxxx",
        channelTitle: "xxxx",
        description: "xxxx",
        channelId: "xxxx",
        title: "xxxx"
    }
}

结果必须是数组。原始数据：

$scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];

【讨论】：