通过带中断的 ngRepeat 遍历数组

Question

我需要你的帮助。我决定尝试创建某种在线市场，但我对 AngularJS 的某些部分还是陌生的，这是我第一次遇到 ng-repeat 的此类问题。我有以下 html-结构（这只是其中的必需部分）：

<div class="goods">
    <div class="goods-row" ng-repeat="???">
        <div class="good" ng-repeat="???">
            <button id="add_to_cart">+</button>
            <div class="descr">
                <div class="descr-top">
                    <h5 class="g-name">
                        NAME IS HERE
                    </h5>
                    <span class="g-price">
                        PRICE IS HERE
                    </span>
                </div>
                <div class="descr-mid" ng-bind="good.description"></div>
            </div>
        </div>
    </div>
</div>

"Goods"(goods-class) 包括 "rows of goods"(goods-row)。每行应包括（默认情况下）4 种商品（good-class），但是，还应注意我将使用过滤器，这可能会连续更改可见商品的数量，因此我需要一个灵活的解决方案。我应该在 ng-repeat 中输入什么？ P.S。我用 JS 代码创建了一个蓝图（在下面发布），它以某种方式显示了我想要的东西，但是如何在 AngularJS?

中制作它

var arr = [];
for (i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
   arr.push({
      number: i
   });
}
var divider = 4;
for (var i = 0; i < arr.length;) {
    for (var j = 0; j < divider; j++) {
        if ((j + i) < arr.length) {
           console.log(arr[j + i]);
        }
    }
    i = i + divider;
    console.log(" ");
}

Answer 1

借助 lodash 库，您可以使用 chunk 函数将数组拆分为块，然后构建适合您需要的列表。

所以基本上就像对普通数组列表（代表包含商品的行）所做的那样进行迭代，并实现一个根据分隔符构建此列表的函数。这样您就可以在需要重建列表时调用该函数（在下面示例中输入的键盘上）并让 AngularJS 完成其余的工作。

(function(angular) {

  'use strict';
  
  angular.module('ngRepeat', [])
    .controller('repeatController', function($scope) {
  
      // the goods
      $scope.goods = [
        { name: "name-1", price: 1.01, description: 'desc-1' }, 
        { name: "name-2", price: 2.02, description: 'desc-2' },
        { name: "name-3", price: 3.03, description: 'desc-3' },
        { name: "name-4", price: 4.04, description: 'desc-4' },
        { name: "name-5", price: 5.05, description: 'desc-5' },
        { name: "name-6", price: 6.06, description: 'desc-6' },
        { name: "name-7", price: 7.07, description: 'desc-7' },
        { name: "name-8", price: 8.08, description: 'desc-8' },
        { name: "name-9", price: 9.09, description: 'desc-9' },
        { name: "name-10", price: 10.10, description: 'desc-10' },
        { name: "name-11", price: 11.11, description: 'desc-11' },
        { name: "name-12", price: 12.12, description: 'desc-12' }
      ];

      // divider determines how many goods per row (defaulted to 4)
      $scope.divider = 4;
    
      // function that build the rows of goods
      $scope.dividerChanged = function() {
        $scope.rows = _.chunk($scope.goods, $scope.divider);
      };
    
      // initialize rows on first load
      $scope.dividerChanged();
    });
})(window.angular);

.divider {
  margin-bottom: 10px;
}
  
.goods-row {
  border: 1px solid blue;
  padding: 10px;
  text-align: center;
}

.good {
  border: 1px solid red;
  display: inline-block;
  padding: 10px;
  margin: 10px;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
    
    divider: <input type="text" ng-model="divider" ng-keyup="dividerChanged()" class="divider">
    
    <div class="goods">
      <div class="goods-row" ng-repeat="row in rows">
        <div class="good" ng-repeat="good in row">
          <button id="add_to_cart">+</button>
          <div class="descr">
            <div class="descr-top">
              <h5 class="g-name">{{ good.name }}</h5>
              <span class="g-price">{{ good.price | currency }}</span>
            </div>
            <div class="descr-mid">{{ good.description }}</div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</body>

Answer 2

我不能完全理解你的问题，你是不是在尝试构建一个过滤数组，但总是想显示前 4 个条目？

如果是，则可以使用 ng-repeat 过滤器（自定义或非自定义）和 limitTo 过滤器

来完成

<div ng-repeat="data in test.data | customFilter:test.selectedFilter | limitTo:4">{{data}}</div>

https://jsbin.com/wajapabaro/1/edit?html,js,output

通过带中断的 ngRepeat 遍历数组

Iterate through array via ngRepeat with breaks

angularjs

ng-repeat