6

У меня есть набор элементов items.Группа ng-repeat items

Я хотел бы использовать директиву ng-repeat или что-то подобное, чтобы группировать n элементов вместе. Например:

Я хотел бы items=['a', 'b', 'c', 'd', 'e', 'f', 'g'] быть вынесено в группах от 3 до быть оказаны как:

<div class="row"> 
    <div class="col-sm-4">a</div> 
    <div class="col-sm-4">b</div> 
    <div class="col-sm-4">c</div> 
</div> 
<div class="row"> 
    <div class="col-sm-4">d</div> 
    <div class="col-sm-4">e</div> 
    <div class="col-sm-4">f</div> 
</div> 
<div class="row"> 
    <div class="col-sm-4">g</div> 
</div> 

Я знаю, что я мог бы сделать некоторую обработку, чтобы превратить items в items=[['a', 'b', 'c'], ['d', 'e', 'f'], ['g']] однако мне было интересно, если anuglarjs была поддержка обойти это. Имеет ли это? Если нет, как бы вы это сделали?

Заранее спасибо.

ответ

12

Вы можете использовать `нг-повторить», как это ..

<div ng-controller="MyCtrl"> 
    <div ng-repeat="item in items"> 
     <span ng-switch on="$index % 3"> 
      <span ng-switch-when="0"> 
       <div class="row"> 
        <div class="col-sm-4" ng-show="items[$index+0]">{{items[$index+0]}}</div> 
        <div class="col-sm-4" ng-show="items[$index+1]">{{items[$index+1]}}</div> 
        <div class="col-sm-4" ng-show="items[$index+2]">{{items[$index+2]}}</div> 
       </div> 
      </span> 
     </span> 
    </div> 
</div> 

Дем: http://bootply.com/86855

+0

Умный! Спасибо за это. – sethetter

1

AFAIK нет директив группировки в угловом.

Решение состоит в том, чтобы сгруппировать данные (для этого подходит underscore.js), а затем вложенные ng-повторы в представлении.

0

Вы можете определить свой собственный фильтр:

app.filter('inGroupsOf', function() { 
    var memoized = {}; 

    return function() { 
    key = Array.prototype.slice.call(arguments); 
    if (typeof memoized[key] === "undefined") { 
     memoized[key] = _inGroupsOf.apply(this, arguments); 
    } 

    return memoized[key]; 
    }; 

    function _inGroupsOf(collection, group_size) { 
    var ar = []; 
    var i, j; 

    for (i = 0, j = -1; i < collection.length; i++) { 
     if (i % group_size == 0) { 
     j++; 
     ar[j] = []; 
     } 

     ar[j].push(collection[i]); 
    } 

    return ar; 
    } 
}); 

Он использует запоминание для предотвращения Error: 10 $digest() iterations reached. Aborting!

Смежные вопросы