javascript - 在 ng-repeat 中排序，每第 4 列后行一次

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。

请注意，以下对网格进行排序的方法是有效的(但在每第四列之后我不会得到一行)

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

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

Answer 1

它应该可以工作。您使用的是哪个 Angular 版本。我检查了每第二行的 fiddle 。

参见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>

Controller

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}}
    ];
}