为嵌套 ng-repeat 对 AngularJS 中的元素进行排序

Question

我正在使用 bootstrap 来显示每行有 3 列的项目网格。为了实现这一点，我使用 ng-repeat 两次，如下所示。

<div class="row" ng-repeat="chunk in projects">
  <div class="col-sm-4" ng-repeat="project in chunk | orderBy:'title'">
    {{project.title}}
  </div>
</div>

我希望能够根据标题字段对项目进行排序。应用过滤器仅对整个列表的一个子集进行排序，即在块级别而不是项目级别排序。

var projects = [[{"title":"Z"},{"title":"A"},{"title":"M"}],
  [{"title":"Z"},{"title":"A"},{"title":"M"}]];

orderBy发生后，行是A M Z，A M Z。如何让它显示A A M，M Z Z？

这里是针对上述问题的plunk。 //编辑：上面的插件指向解决方案，因为我更新了插件。

Answer 1

您需要一个自定义过滤器，将您的子数组转换为单个数组。拥有单独数组的全部意义在于隔离内容，这与您想要的相反。

过滤器：

yourAppModule
.filter('titleSort', function(){
    return function(input){
        var fullArray = []; //Will be the output array    
        for(var i=0;i<input.length;i++)            
            fullArray.concat(input[i]);
            //Iterates through all the arrays in input (projects)
            //and merges them into one array            
        fullArray = fullArray.sort(function(a,b){return a.title>b.title});
            //Sorts it by the title property
        var chunks = [];
        var currentChunk;
        for(var i=0;i<fullArray.length;i++){
            if(i%3===0){
                currentChunk = [];
                chunks.push(currentChunk);
            }
            currentChunk.push(fullArray[i]);   
        }
        return chunks;
    };
} ...

现在你的视图可以是这样的：

<div class="col-sm-4" ng-repeat="project in projects | titleSort">
    {{project.title}}
</div>

Answer 2

试试这个。可能对你有帮助。

var app = angular.module("app",[])
app.controller('ctrl',['$scope', function($scope){
        $scope.data = [[{"title":"Z"},{"title":"A"},{"title":"M"}],
  [{"title":"Z"},{"title":"A"},{"title":"M"}]];
  
  $scope.data2 = [];
  angular.forEach( $scope.data,function(d){
    angular.forEach(d,function(d1){
      $scope.data2.push(d1);
      })
    })
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="ctrl">
<div class="item item-checkbox">
   <div class="row">
  <div class="col-sm-4" ng-repeat="project in data2 | orderBy:'title'">
    {{project.title}}
  </div>
</div>    
</div>

Answer 3

我终于能够通过过滤器链解决这个问题。我使用 angular-filter module/library 但这甚至可以在没有 angular-filter.

的情况下完成

<div class="container" ng-controller="ExampleController as exampleVm">
<div class="row" ng-repeat="chunk in exampleVm.projects|  chunkBy: 'title' | groupBy : 3">
  <div class="col-sm-4" ng-repeat="project in chunk">
    {{project.title}}
  </div>
</div>

我将数组展平并使其看起来像这样。

var projects = [{"title:Z"},{"title":"A"},{"title":"M"},{"title:Z"},{"title":"A"},{"title":"M"}]

在过滤器链中，我首先按标题对展平数组中的元素进行排序，然后将其分成每个 3 个元素的子数组。希望这有帮助。

你可以找到 plunk here。

为嵌套 ng-repeat 对 AngularJS 中的元素进行排序

Sorting elements in AngularJS for nested ng-repeat

twitter-bootstrap

angularjs

angularjs-orderby

angularjs-filter