Angularjs OrderBy和limitTo on ng-repeat并不起作用

时间:2016-08-05 23:34:14

标签: angularjs ng-repeat angularjs-orderby angularjs-limitto

我已尝试过许多使用OrderBy和limitTo进行ng-repeat的例子,但我不能让我的json使用它。



var myapp = angular.module('myapp', []);
myapp.controller('leagueFixure', function($scope, $http, $sce) {

                $scope.topGoal = [{"player_team":"Real","player_name":"test1","player_goal":"88"},{"player_team":"Barca","player_name":"test2","player_goal":"66"},{"player_team":"Liver","player_name":"test","player_goal":"6"},{"player_team":"Chelsea","player_name":"test3","player_goal":"6"}];
    $scope.orderProp = 'player_goal';
    $scope.quantity = 2;
            });
myapp.filter('groupBygf', function ($timeout) {
                return function (data, key) {
                    if (!key) return data;
                    var outputPropertyName = '__groupBy__' + key;
                    if(!data[outputPropertyName]){
                        var result = {};
                        for (var i=0;i<data.length;i++) {
                            if (!result[data[i][key]])
                                result[data[i][key]]=[];
                            result[data[i][key]].push(data[i]);
                        }
                        Object.defineProperty(data, outputPropertyName, {enumerable:false, configurable:true, writable: false, value:result});
                        $timeout(function(){delete data[outputPropertyName];},0,false);
                    }
                    return data[outputPropertyName];
                };
            });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp"  ng-controller="leagueFixure">
  
                                        <ul class="matches" ng-repeat="(player_goal, topGoals) in (topGoal | groupBygf: 'player_goal') | orderBy:orderProp | limitTo:quantity ">
                                            <li class="rowgray daytime">{{player_goal}} </li>
                                            <ul class="row match" ng-repeat="player in topGoals | orderBy:'player_name'">
                                                <li style="padding-right: 20px !important;">{{player.player_name}} ({{player.player_team}})</li>
                                            </ul>
                                        </ul>
                                       
</div>
&#13;
&#13;
&#13;

OrderBy和limitTo on ng-repeat不起作用

0 个答案:

没有答案