ng-repeat orderBy突然停止排序

时间:2022-12-02 16:55:12

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')

ng-repeat orderBy突然停止排序

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制作的模型,结果证明这是完美的。因此,问题必须出现在我收到的数据中,如下所示:

ng-repeat orderBy突然停止排序

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

Plunker example

#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}]
}

Plunker example

#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
]