Как бы я использовал AngularJS ng-repeat с платформой Twitter Bootstrap?

Как бы я использовал AngularJSng-repeat отобразить следующий HTML (Twitter Bootstrap Scaffolding)? По сути, каждая третья запись мне нужна, чтобы закрыть</div>распечатать<hr>затем откройте другой<div class="span4">

    <div class="row">
      <div class="span4">
        <h3>
          Project A
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project B
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project C
        </h3>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="span4">
        <h3>
          Project D
        </h3>
      </div>
      <div class="span4">
        <h3>
          Lab Title
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project E
        </h3>
      </div>
    </div>

Я создал скрипку для демонстрации кода.
http://jsfiddle.net/ADukg/261/

Ответы на вопрос(5)

Решение Вопроса

Более элегантный способ состоит в том, чтобы использовать модель представления для предоставления фрагментированной коллекции, а затем позволить представлению обрабатывать ее как

<div ng-controller="Controller">
    Projects <input ng-model="projects"></input>
    <hr/>
    <div ng-repeat="row in rows">
        <div ng-repeat="project in row">
            Projects {{project}}
        </div>
        <hr/>
    </div>
</div>​

и кофейный текст довольно прост

# Break up an array into even sized chunks.
chunk = (a,s)->
    if a.length == 0
        []
    else               
        ( a[i..i+s-1] for i in [0..a.length - 1 ] by s)

@Controller = ($scope)->
    $scope.projects = "ABCDEF"

    $scope.$watch "projects", ->      
       $scope.rows = chunk $scope.projects.split(""), 3

angular.bootstrap(document, []);

& # X200B;

http://jsfiddle.net/ADukg/370/

конечные точки ng-repeat-start и ng-repeat-end кажется удобным способом добиться этого:

Что приводит к простому коду

<div ng-controller="MyCtrl">
    <div ng-repeat-start="project in projects">
        <span>
            <div class="row">
                <h3 class="span4">{{project}}</h3>
            </div
        </span>
    </div>
    <hr ng-repeat-end ng-if="($index + 1) % 3 == 0" />
</div>

Видеть этоjsfiddle

Вот способ:

<div ng-controller="MyCtrl">
  <div ng-repeat="project in projects">
    <span ng-if="$index % 3 == 0">
      <hr />
      <div class="row">
        <h3 class="span4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
        <h3 class="span4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
        <h3 class="span4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
      </div>
    </span>
  </div>
</div>

Этот способ также будет работать, если у вас есть, например, 7 элементов данных: на последних 3 данных он покажет только элемент 7 и не будет пытаться показать несуществующие элементы 8 и 9.

http://jsfiddle.net/4LhN9/68/

EDIT: Обновлено использование ng-if & amp; угловой 1.2.12

 01 апр. 2013 г., 01:28
Хорошо, обновлено и отредактировано :)
 31 мар. 2013 г., 10:56
Это великолепно. @ и добавь идею робота-нг-шоу здесь и к твоей скрипке!
 20 янв. 2013 г., 06:28
Догадаться. Просто сделайте ng-show = & quot;! (($ Index + x) & gt; (art.length-1)) & quot; на img, где x равно 0, 1, 2 соответственно. Угловой это так гладко.
 06 мая 2014 г., 21:31
Разветвленный и упрощенный, без нескольких пролетовjsfiddle.net/ivarprudnikov/mSwSW
 20 янв. 2013 г., 06:11
На самом деле это довольно умное решение. Но как бы вы справились со случаем, когда длина набора данных не делится на 3? Например, предположим, что вы отображали изображения ... $ index + 0 в последней строке указывает на URL-адрес img, но +1 и +2 пусты.

тно используемое решение, вы можете создать собственный фильтр, который разбивает массив на группы строк:

angular.module('app').filter('group', function() {
    /**
     * splits an array into groups of the given size
     * e.g. ([1, 2, 3, 4, 5], 2) -> [[1, 2], [3, 4], [5]]
     */
    return function(array, groupSize) {
        return _.groupBy(array, function(val, index) {
            return Math.floor(index / groupSize);
        });
    };
});

И в представлении:

<div class="row" ng-repeat="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>

Чтобы включить hr, вы можете использовать начальную и конечную точки ng-repeat:

<div class="row" ng-repeat-start="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>
<hr ng-repeat-end />
 07 янв. 2014 г., 22:17
Мне нравится это в теории. На практике, однако, он бросает10 $digest() iterations reached исключение.See this fiddle.
 31 янв. 2014 г., 05:44
Спасибо, руфаматик. Я изучил его и обнаружил, что ng-repeat использует $ watchCollection для проверки изменений. Так как $ watchCollection делает поверхностное сравнение содержимого массива и моей «группы» Фильтр возвращает новый набор массивов каждый раз, когда он вызывается, angular считает, что массив постоянно меняется. Обходной путь - инициализировать сгруппированный массив перед ng-repeat вместо использования фильтра, использования ng-init или в контроллере. Но тогда он теряет элегантность.

Двигаясь отболее легкий ответ, Мне не нравится оригинальное решение из-за пустых элементов dom, которые оно производит. Это для 3 делений на строку.

<div ng-controller="ModulesCtrl">
    <div class="row" ng-repeat="i in fields.range()">
        <div class="span4" ng-repeat="field in fields.slice(i,i+3)">
            <h2>{{field}}</h2>
        </div>
    </div>
</div>

В функции FieldsCtrl ($ scope):

$scope.fields.range = function() {
    var range = [];
    for( var i = 0; i < $scope.fields.length; i = i + 3 )
        range.push(i);
    return range;
}

Если вы знаете fields.length, вы можете вместо fields.range () использовать [0,3,6,9] и т. Д.

 20 нояб. 2013 г., 05:12
Это сработало для меня!

Ваш ответ на вопрос