Question

ng-repeat中显示的数据是从firebase db获取的，因此是异步加载的

这是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>

这是我的控制者：

app.controller 'RankController', ($scope, angularFire) ->

  $scope.players;
  ref = new Firebase("https://steamduck.firebaseio.com/players")
  angularFire(ref, $scope, 'players')

enter image description here

我做错了什么？为什么列表没有被Level命令？

编辑：如果我使用 lukpaw 制作的模型，则可以完美地运行。因此，问题必须出现在我收到的数据中，如下所示：

enter image description here

Answer 1

我认为您的排序没问题。我做了一个简单的例子，它以你的方式工作。也许你没有放置的东西在你的代码中是错的（首先检查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

Answer 2

看来orderBy过滤器只知道如何对数组进行排序。因此，这将永远不会与用作模型的JSON对象一起使用。

我最终实现了自己的过滤器：

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 =“玩家参与者| orderObjectBy：'等级'”

Answer 3

ng-repeat =“玩家中的玩家| orderBy：等级：反向”？

Answer 4

受@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
]

ng-repeat orderBy突然停止排序

4 个答案: