在每 4 列之后以行排序 ng-repeat

Question

要创建一个项目网格，每行最多包含 4 个产品，we can do the following：

<div ng-repeat="product in products" ng-if="$index % 4 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4">{{products[$index + 1]}}</div>
    <div class="col-xs-4">{{products[$index + 2]}}</div>
    <div class="col-xs-4">{{products[$index + 3]}}</div>
</div>

但是，如果我尝试添加：

<div ng-repeat="product in products | orderBy: '-value.timestamp_creation'" ng-if="$index % 4 == 0" class="row">
      <!-- see above -->
</div>

其中products 如下所示（数组）：

[
  {name: "John", value: {timestamp_creation: 1}}, 
  {name: "Andrew", value: {timestamp_creation: 4}},
  {name: "Senior", value: {timestamp_creation: 2}}
  {name: "Dog", value: {timestamp_creation: 3}}
]

那么对网格进行排序就不起作用了。它只显示顺序 1,4,2,3。

请注意，以下对网格进行排序的方法有效（但我在每 4 列之后没有得到一行）

<div ng-repeat="product in products | orderBy: '-value.timestamp_creation'" class="row">
    <div class="col-xs-4">{{product}}</div>
</div>

那么如何结合这两种方法，在每 4 项之后获得一列，但仍然能够对列表进行排序？

Answer 1

它应该工作。您正在使用哪个角度版本。我检查了每第二行的小提琴。

见Working Fiddle

HTML

<div ng-controller="MyCtrl">
  <div ng-repeat="product in products | orderBy: '-value.timestamp_creation'" ng-if="$index % 2 === 0" class="row">
    <div class="col-xs-4">{{product}}</div>
</div>
</div>

控制器

function MyCtrl($scope) {
    $scope.products = [
        {name: "John", value: {timestamp_creation: 1}}, 
        {name: "Andrew", value: {timestamp_creation: 4}},
        {name: "Senior", value: {timestamp_creation: 2}},
        {name: "Dog", value: {timestamp_creation: 3}},
        {name: "John 1", value: {timestamp_creation: 7}}, 
        {name: "Andrew 1", value: {timestamp_creation: 6}},
        {name: "Senior 1", value: {timestamp_creation: 8}},
        {name: "Dog 1", value: {timestamp_creation: 5}}
    ];
}