我正在使用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。 //编辑:上面的插件指向解决方案,因为我更新了插件。
答案 0 :(得分: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>
答案 1 :(得分: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。
答案 2 :(得分:0)
试试这个。可能对你有所帮助。
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>