高级结构化:环绕ng重复项目Angular.js

Advanced structuring: Surrounding ngRepeated items Angular.js

本文关键字：项目 Angular js ng 结构化 环绕 高级      更新时间：2023-09-26

您有一个正在迭代的对象数组，如何用（element）包围每个（x）元素？

如果您的目标是：

每4ng个重复元素周围都有一个（元素）

surrounding
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
/
surrounding
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
/

使（元素）围绕4ng重复元素的每2组

complicated
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
/
complicated
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
/

ng重复的正常用法：

<div ng-controller="ExampleContrller as example" >      
  <div ng-repeat="ex in example.arr">
    <span>{{ex.a}}</span>
    <span>{{ex.b}}</span>
  </div>
</div>

将输出：

<div ng-controller="ExampleContrller as example" >      
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
</div>

如何让ng repeat输出以下内容：

<div ng-controller="ExampleContrller as example" >      
  <section> <!-- get a section to surround every (x) ng-repeated elements -->
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
  </section>
  <section>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
  </section>
</div>

这里有一种方法，通过创建另一个具有适当分组的数组并使用两个ng-repeat:

$scope.data2 = (function(data, count) {
    var arr = [];
    var len = data.length / count;
    for (var i=0 ; i<len ; i++) {
        arr.push(data.slice(i*count, (i+1)*count));
    }
    return arr;
})($scope.data, 3);

-

<section ng-repeat="group in data2">
  <div ng-repeat="item in group">
    <span>{{item.a}}</span>
    <span>{{item.b}}</span>
  </div>
</section>

data是原始数组，count是每组中的项数
小提琴在这儿：http://jsfiddle.net/a9n1e7w5/2/

可能有更好的方法可以做到这一点，但这是有效的。

这和奥斯汀写的是一样的，他只是写得更好。

http://jsfiddle.net/u4e7dcgv/

<main id="main" class="content column" role="main" ng-controller="GalleryController as gallery">
   <div ng-repeat="row in gallery.rows" class="content row">
    <article ng-repeat="gal in row"  class="post">
        <div class="post-content">{{gal.p}}</div>
    </article>
  </div>
</main>

/**
 * Splits an array of items into smaller arrays within the item.
 * @param   {Array}  - arrayOfItems
 * @param   {Number} - numberOfRows (default is 4)
 * @returns {Array}
 */
function wrapIntoRows(arrayOfItems, numberOfRows) {
    var items = arrayOfItems,
        rows = numberOfRows || 4,
        wrappedDom = [];
    function wrap(arr, num) {
        var surround, notSurrounded, _num = num;
        if (arr.length > _num) {
            surround = arr.slice(0, _num);
            notSurrounded = arr.slice(_num, arr.length);
            wrappedDom.push(surround);
            // loop
            wrap(notSurrounded, _num);
        } else {
            var remainder = _num - arr.length;
            surround = arr;
            for (var i = 0; i < remainder; i++) {
                var emptydiv = document.createElement('div');
                surround.push({});
            }
            wrappedDom.push(surround);
        }
    }
    wrap(items, rows);
    return wrappedDom;
}
var Gallery = angular.module('Gallery', []);
Gallery.controller('GalleryController', function ($scope) {
    var gallery = this,
        ArrayOfData = [
              { p: "value 1" }
            , { p: "value 2" }
            , { p: "value 3"}
            , { p: "value 4"}
            , { p: "value 5"}
            , { p: "value 6"}
        ];
    gallery.rows = wrapIntoRows(ArrayOfData);
    $scope.GalleryController = this;
    return $scope.CompanyController;
});
angular.bootstrap(document.body, [
    "Gallery"
 ]);
相关文章：