Сортировка элементов в AngularJS для вложенных ng-repeat

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

Я был в состоянии решить эту проблему, наконец, через фильтровальное сцепление. Я использовал модуль/библиотеку угловых фильтров, но это можно сделать даже без углового фильтра.

<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-х элементов в каждых. Надеюсь это поможет.

Вы можете найти плунж here.

Answer 2

Вам понадобится настраиваемый фильтр, который превратит ваши подмассивы в один массив. Весь смысл иметь отдельные массивы - это изолировать содержимое, которое противоположно тому, что вы хотите.

Фильтр:

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 3

попробовать это. может помочь вам.

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>