The data being shown in the ng-repeat is acquired from a firebase db and as such is loaded asynchronously
ng-repeat中显示的数据是从firebase db获取的,因此是异步加载的
this is the HTML:
这是HTML:
<tr ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ng-repeat="player in players|orderBy:'-Level'" class="neutral">
<td>{{$index+1}}</td>
<td>{{player.PlayerName}}</td>
<td>{{player.Wins}}</td>
<td>{{player.Losses}}</td>
<td>{{player.Level}}</td>
</tr>
And this is my controller:
这是我的控制器:
app.controller 'RankController', ($scope, angularFire) ->
$scope.players;
ref = new Firebase("https://steamduck.firebaseio.com/players")
angularFire(ref, $scope, 'players')
What am I doing wrong? why is the list not being ordered by Level?
我究竟做错了什么?为什么列表没有按级别排序?
edit: Turns out this works perfectly if I use the model made by lukpaw. As such the problem must be in the data I receive which looks like this :
编辑:如果我使用lukpaw制作的模型,结果证明这是完美的。因此,问题必须出现在我收到的数据中,如下所示:
4 个解决方案
#1
1
I think that your sorting is OK. I did simple example and it works in your way. Maybe something which did not you placed is wrong in your code (first check JavaScript console).
我认为你的排序没问题。我做了一个简单的例子,它以你的方式工作。也许你没有放置的东西在你的代码中是错的(首先检查JavaScript控制台)。
HTML:
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table border="1">
<tr ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ng-repeat="player in players | orderBy:'-Level'">
<td>{{$index+1}}</td>
<td>{{player.PlayerName}}</td>
<td>{{player.Wins}}</td>
<td>{{player.Losses}}</td>
<td>{{player.Level}}</td>
</tr>
</table>
</div>
</body>
</html>
JavaScript:
angular.module('App', []);
function Ctrl($scope) {
$scope.players =
[{PlayerName:'John', Wins: 12, Losses:10, Level: 2},
{PlayerName:'Mary', Wins:7, Losses:19, Level: 1},
{PlayerName:'Mike', Wins:5, Losses:21, Level: 1},
{PlayerName:'Adam', Wins:9, Losses:35, Level: 3},
{PlayerName:'Julie', Wins:10, Losses:29, Level: 2}]
}
#2
1
It would appear that the orderBy filter only knows how to sort an array. As such this would never work with JSON objects being used as the model.
似乎orderBy过滤器只知道如何对数组进行排序。因此,这将永远不会与用作模型的JSON对象一起使用。
I ended up implementing my own filter :
我最终实现了自己的过滤器:
app.filter "orderObjectBy", ->
(input, attribute) ->
return input unless angular.isObject(input)
array = []
for key of input
array.push input[key ]
array.sort (a, b) ->
a = parseInt(a[attribute])
b = parseInt(b[attribute])
b - a
ng-repeat="player in players | orderObjectBy:'Level'"
ng-repeat =“玩家参与者| orderObjectBy:'等级'”
#3
0
How about ng-repeat="player in players|orderBy:Level:reverse"?
怎么样的ng-repeat =“玩家中的玩家| orderBy:等级:反向”?
#4
0
Inspired by @RonnieTroj answer, this filter reuses built-in orderBy filter and can handle both arrays and objects of any comparable type, not just integers:
受@RonnieTroj回答的启发,这个过滤器重用了内置的orderBy过滤器,可以处理任何类似类型的数组和对象,而不仅仅是整数:
app.filter 'orderCollectionBy', ['orderByFilter', (orderByFilter) ->
(input, attribute, reverse) ->
return unless angular.isObject input
if not angular.isArray input
input = (item for key, item of input)
orderByFilter input, attribute, reverse
]
#1
1
I think that your sorting is OK. I did simple example and it works in your way. Maybe something which did not you placed is wrong in your code (first check JavaScript console).
我认为你的排序没问题。我做了一个简单的例子,它以你的方式工作。也许你没有放置的东西在你的代码中是错的(首先检查JavaScript控制台)。
HTML:
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table border="1">
<tr ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ng-repeat="player in players | orderBy:'-Level'">
<td>{{$index+1}}</td>
<td>{{player.PlayerName}}</td>
<td>{{player.Wins}}</td>
<td>{{player.Losses}}</td>
<td>{{player.Level}}</td>
</tr>
</table>
</div>
</body>
</html>
JavaScript:
angular.module('App', []);
function Ctrl($scope) {
$scope.players =
[{PlayerName:'John', Wins: 12, Losses:10, Level: 2},
{PlayerName:'Mary', Wins:7, Losses:19, Level: 1},
{PlayerName:'Mike', Wins:5, Losses:21, Level: 1},
{PlayerName:'Adam', Wins:9, Losses:35, Level: 3},
{PlayerName:'Julie', Wins:10, Losses:29, Level: 2}]
}
#2
1
It would appear that the orderBy filter only knows how to sort an array. As such this would never work with JSON objects being used as the model.
似乎orderBy过滤器只知道如何对数组进行排序。因此,这将永远不会与用作模型的JSON对象一起使用。
I ended up implementing my own filter :
我最终实现了自己的过滤器:
app.filter "orderObjectBy", ->
(input, attribute) ->
return input unless angular.isObject(input)
array = []
for key of input
array.push input[key ]
array.sort (a, b) ->
a = parseInt(a[attribute])
b = parseInt(b[attribute])
b - a
ng-repeat="player in players | orderObjectBy:'Level'"
ng-repeat =“玩家参与者| orderObjectBy:'等级'”
#3
0
How about ng-repeat="player in players|orderBy:Level:reverse"?
怎么样的ng-repeat =“玩家中的玩家| orderBy:等级:反向”?
#4
0
Inspired by @RonnieTroj answer, this filter reuses built-in orderBy filter and can handle both arrays and objects of any comparable type, not just integers:
受@RonnieTroj回答的启发,这个过滤器重用了内置的orderBy过滤器,可以处理任何类似类型的数组和对象,而不仅仅是整数:
app.filter 'orderCollectionBy', ['orderByFilter', (orderByFilter) ->
(input, attribute, reverse) ->
return unless angular.isObject input
if not angular.isArray input
input = (item for key, item of input)
orderByFilter input, attribute, reverse
]