Angular ng-repeat orderBy不工作

时间:2015-10-27 06:56:00

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

您好我从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>

单击表标题时,没有错误。所以我无法弄清楚什么不起作用。任何帮助表示赞赏。感谢。

1 个答案:

答案 0 :(得分:2)

您的对象(在ng-repeat中使用)与原始示例(https://docs.angularjs.org/api/ng/filter/orderBy)不同。

$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}];

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

{{1}}