Question

例如，我有以下用于ng-repeat的集合：

$scope.pokedex = [{
  type: "Fire",
  pokemon: ["Charizard", "Moltres"]
},{
  type: "Rock",
  pokemon: []
},{
  type: "Fighting",
  pokemon: ["Machamp", "Hitmonchan"]
},{
  type: "Dragon",
  pokemon: []
}];

此集合将在ng-repeat指令中生成。在实际应用程序中，将从数据库中检索集合，因此它可能是未排序的。我想以下面的方式对它进行排序：优先级排序类型与口袋妖怪到顶部，然后按名称对每个组进行排序。

编辑：我需要澄清后端数据的组成部分。在上面的示例中，$scope.pokedex由常数类型组成 - 这些是类别。应用程序从数据库中检索Pokemon并相应地填充每个类别的列表。有意地将所有类型的硬编码硬编码到数组中，无论其中的Pokemon列表是否为空，它都将保持不变。

使用ng-repeat生成网页时，所需的最终状态如下：

显示一个手风琴，每个类型作为标题，身体中的口袋妖怪列表作为列表/表格。
所有空类别都应该被禁用但仍然可见，它们的标题被赋予特定的CSS格式，并且所有这些类别都被推到非空类别下面的底部。
空组和非空组应按类别/类型名称单独排序。

除了将空组推到底部以及按名称排序之外的所有内容都已实现。这些是我实施的最终要求。

我该怎么做？有没有办法提前或在orderBy期间通过ng-repeat或任何其他可行的解决方案进行此操作？

Answer 1

你可以这样试试这个

<ul>
<li ng-repeat="people in peoples | orderObjectBy:'pokemon':true">{{ people.name }}</li>
</ul>

Answer 2

请尝试以下代码

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

        <div ng-app="myApp">
          
          <div ng-controller="pokemonController">
            
            <ul>
              <li ng-repeat="people in peoples | orderBy:['-pokemon.length','name']">
                
                name: {{people.name}} - number of Pokemons: {{people.pokemon.length}} 
                
                <hr />
              </li>
            </ul>
            
            
          </div>
          
          
        </div>



        <script>
          
          var app = angular.module('myApp',[]);
          
          app.controller('pokemonController', ['$scope', function($scope){
            
            
          $scope.peoples = [{
          name: "Obama",
          pokemon: ["Charizard", "Dragonite", "Moltres"]
        },{
          name: "Merkel",
          pokemon: []
        },{
          name: "Putin",
          pokemon: ["Machamp", "Hitmonchan"]
        },{
          name: "Kim",
          pokemon: []
        }];
          
            
          }]);
          
          </script>

＆＃13;

ng-repeat

2 个答案: