在AngularJS中对嵌套ng-repeat的元素进行排序 [英] Sorting elements in AngularJS for nested ng-repeat
问题描述
我正在使用引导程序来显示项目网格,每行具有3列。为了实现此目的,我使用ng-repeat两次,如下所示。
I am using bootstrap to display a grid of projects with each row having 3 columns. In order to accomplish this, I am using ng-repeat twice like below.
<div class="row" ng-repeat="chunk in projects">
<div class="col-sm-4" ng-repeat="project in chunk | orderBy:'title'">
{{project.title}}
</div>
</div>
我希望能够根据其标题字段对项目进行排序。应用过滤器只会对整个列表的一部分进行排序,即在块级别而非项目级别进行排序。
I want to be able to sort the project based on its title field. Applying a filter only sorts a subset of the whole list i.e. sorts at the chunk level rather than the projects level.
var projects = [[{"title":"Z"},{"title":"A"},{"title":"M"}],
[{"title":"Z"},{"title":"A"},{"title":"M"}]];
orderBy发生后,行是AMZ,AMZ。如何显示AAM ,MZZ?
After the orderBy happens, the rows are A M Z, A M Z. How do I get it to display A A M, M Z Z?
这是插件对于上述问题。
//编辑:上面的问题指向了解决方案,因为我更新了问题。
Here is the plunk for the above problem. //EDIT : The above plunk points to the solution because I updated the plunk.
推荐答案
最后通过过滤器链接解决此问题。我使用了角度过滤器模块/库,但是甚至可以不用角度过滤器来完成。
I was able to solve this problem finally through filter chaining. I used angular-filter module/library but this can be even done without 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>
我将阵列弄平并制成看起来像这样。
I flattened the array and made it look like this.
var projects = [{"title:Z"},{"title":"A"},{"title":"M"},{"title:Z"},{"title":"A"},{"title":"M"}]
在过滤器链中,我先按标题对展平数组中的元素进行排序,然后将其划分为每个包含3个元素的子数组。希望这对您有所帮助。
In the filter chain, I order the elements in the flattened array first by title and then divide it into subarrays of 3 elements each. Hope this helps.
您可以在此处。
这篇关于在AngularJS中对嵌套ng-repeat的元素进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!