Kątowy ng-repeat dodaje wiersz bootstrap co 3 lub 4 cols

Szukam odpowiedniego wzorca do wstrzykiwania klasy wiersza ładowania początkowego co każde 3 kolumny. Potrzebuję tego, ponieważ kolumny nie mają ustalonej wysokości (i nie chcę jej naprawiać), więc psuje mój projekt!

Oto mój kod:

<div ng-repeat="product in products">
    <div ng-if="$index % 3 == 0" class="row">
        <div class="col-sm-4" >
            ...
        </div>
    </div>
</div>

Ale wyświetla tylko jeden produkt w każdym wierszu. Jako wynik końcowy chcę:

<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>
<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>

Czy mogę to osiągnąć za pomocą samego wzoru powtarzania ng (bez dyrektywy lub kontrolera)? W docs wprowadzają NG-repeat-start i NG-repeat-end, ale nie mogę dowiedzieć się, jak wykorzystać to właśnie ten przypadek użycia! Czuję, że jest to coś, czego często używamy w tworzeniu szablonów bootstrap! ? Dzięki

Najczęściej głosowana odpowiedź, choć skuteczna, nie jest tym, co uważam za metodę kątową, ani nie jest to użycie własnych klas bootstrap, które mają poradzić sobie z tą sytuacją. Jak wspomniał @claies, .clearfixklasa jest przeznaczona do takich sytuacji. Moim zdaniem najczystsza realizacja wygląda następująco:

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

Ta struktura pozwala uniknąć bałaganu w indeksowaniu tablicy products, pozwala na czystą notację kropkową i wykorzystuje klasę clearfix zgodnie z jej przeznaczeniem.

Wiem, że jest trochę za późno, ale i tak może komuś pomóc. Zrobiłem to tak:

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
</div>

jsfiddle

Okay, to rozwiązanie jest znacznie prostsze niż te, które już są dostępne i umożliwia różne szerokości kolumn dla różnych szerokości urządzeń.

<div class="row">
    <div ng-repeat="image in images">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            ... your content here ...
        </div>
        <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>
        <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>
        <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>
        <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>
    </div>
</div>

Zauważ, że % 6część ma być równa liczbie wynikowych kolumn. Więc jeśli w elemencie kolumny masz klasę col-lg-2będzie 6 kolumn, więc użyj ... % 6.

Ta technika (z wyłączeniem ng-if) jest faktycznie udokumentowana tutaj: Dokumentacja Bootstrap

Chociaż to, co chcesz osiągnąć, może być przydatne, istnieje inna opcja, o której myślę, że możesz przeoczyć, która jest znacznie prostsza.

Masz rację, tabele Bootstrap działają dziwnie, gdy masz kolumny, które nie mają stałej wysokości. Istnieje jednak klasa ładowania początkowego utworzona w celu zwalczania tego problemu i wykonywania responsywnych resetów .

po prostu utwórz pusty <div class="clearfix"></div>przed rozpoczęciem każdego nowego wiersza, aby umożliwić zresetowanie elementów zmiennoprzecinkowych i powrót kolumn na właściwe pozycje.

tutaj jest but .

Dzięki za sugestie, trafiłeś na właściwą drogę!

Przejdźmy do pełnego wyjaśnienia:

• Domyślnie zapytanie http get w AngularJS zwraca obiekt

• Więc jeśli chcesz użyć funkcji @Ariel Array.prototype.chunk, musisz najpierw przekształcić obiekt w tablicę.

• A następnie użycie funkcji chunk W SWOIM KONTROLERZE w przeciwnym razie, jeśli zostanie użyta bezpośrednio do ng-repeat, doprowadzi cię do błędu infdig . Ostatni kontroler wygląda:

  // Initialize products to empty list
  $scope.products = [];
  
  // Load products from config file
  $resource("/json/shoppinglist.json").get(function (data_object)
  {
      // Transform object into array
      var data_array =[];
      for( var i in data_object ) {
          if (typeof data_object[i] === 'object' && data_object[i].hasOwnProperty("name")){
              data_array.push(data_object[i]);
          }
      }
      // Chunk Array and apply scope
      $scope.products = data_array.chunk(3);
  });

A HTML staje się:

<div class="row" ng-repeat="productrow in products">

    <div class="col-sm-4" ng-repeat="product in productrow">

Z drugiej strony zdecydowałem się bezpośrednio zwrócić tablicę [] zamiast obiektu {} z mojego pliku JSON. W ten sposób kontroler stanie się (proszę zwrócić uwagę na specyficzną składnię toArray: true ):

    // Initialize products to empty list 
    $scope.products = [];

    // Load products from config file
    $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
    {
        $scope.products = data_array.chunk(3);
    });

HTML pozostaje taki sam jak powyżej.

OPTYMALIZACJA

Ostatnie pytanie w napięciu brzmi: jak zrobić to w 100% AngularJS bez rozszerzania tablicy javascript o funkcję chunk ... jeśli niektórzy są zainteresowani pokazaniem nam, czy ng-repeat-start i ng-repeat-end są do zrobienia. . Jestem ciekawy ;)

ROZWIĄZANIE ANDREWA

Dzięki @Andrew wiemy teraz, że dodawanie klasy bootstrap clearfix co trzy (lub jakikolwiek inny numer) elementów rozwiązuje problem z wyświetlaniem z różnych wysokości bloku.

Więc HTML staje się:

<div class="row">

    <div ng-repeat="product in products">

        <div ng-if="$index % 3 == 0" class="clearfix"></div>

        <div class="col-sm-4"> My product descrition with {{product.property}}

A twój kontroler pozostaje dość miękki dzięki usuniętej funkcji chunck :

// Initialize products to empty list 
        $scope.products = [];

        // Load products from config file
        $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
        {
            //$scope.products = data_array.chunk(3);
            $scope.products = data_array;
        });

Możesz to zrobić bez dyrektywy, ale nie jestem pewien, czy to najlepszy sposób. Aby to zrobić, musisz utworzyć tablicę tablic z danych, które chcesz wyświetlić w tabeli, a następnie użyć 2 ng-repeat do iteracji po tablicy.

aby utworzyć tablicę do wyświetlania, użyj tej funkcji jak w przypadku produktów.chunk (3)

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

a następnie zrób coś takiego, używając powtórzenia 2 ng

<div class="row" ng-repeat="row in products.chunk(3)">
  <div class="col-sm4" ng-repeat="item in row">
    {{item}}
  </div>
</div>

Oparte na rozwiązaniu Alpar, przy użyciu tylko szablonów z wspomaganymi powtórzeniami ng. Działa zarówno z pełnymi, jak i częściowo pustymi wierszami:

<div data-ng-app="" data-ng-init="products='soda','beer','water','milk','wine']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4" 
            ng-repeat="product in products.slice($index, ($index+3 > products.length ? 
            products.length : $index+3))"> {{product}}</div>
    </div>
</div>

JSFiddle

Właśnie stworzyłem rozwiązanie, które działa tylko w szablonie. Rozwiązaniem jest

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/2+1">    <!-- 2 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-6" ng-if="$index>=2*$parent.$index && $index <= 2*($parent.$index+1)-1"> <!-- 2 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

Punkt używa danych dwukrotnie, jeden dla pętli zewnętrznej. Dodatkowe znaczniki zakresu pozostaną, ale zależy to od tego, jak sobie radzisz.

Jeśli jest to układ 3-kolumnowy, będzie wyglądał jak

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/3+1">    <!-- 3 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-4" ng-if="$index>=3*$parent.$index && $index <= 3*($parent.$index+1)-1"> <!-- 3 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

Szczerze, chciałem

$index<Math.ceil(products.length/3)

Chociaż to nie zadziałało.

Kolejne małe ulepszenie odpowiedzi @Duncan i innych odpowiedzi opartych na elemencie clearfix. Jeśli chcesz, aby treść była klikalna , potrzebujesz na niej z-index> 0 lub clearfix będzie nakładał się na treść i obsługiwał kliknięcie.

Oto przykład, który nie działa (nie widać wskaźnika kursora, a kliknięcie nic nie da):

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4" style="cursor: pointer" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

Chociaż jest to naprawione :

<div class="row">
    <div ng-repeat-start="product in products" class="clearfix" ng-if="$index % 3 == 0"></div>
    <div ng-repeat-end class="col-sm-4" style="cursor: pointer; z-index: 1" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
    </div>
</div>

Dodałem z-index: 1, że zawartość podnosi się ponad clearfix i usunąłem element div kontenera, używając zamiast tego ng-repeat-starti ng-repeat-end(dostępny w AngularJS 1.2), ponieważ spowodował, że indeks Z nie działał.

Mam nadzieję że to pomoże!

Aktualizacja

Plunker: http://plnkr.co/edit/4w5wZj

rozwiązałem to za pomocą klasy ng

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>

Najlepszym sposobem zastosowania klasy jest użycie ng-class, które może być użyte do zastosowania klas na podstawie jakiegoś warunku.

<div ng-repeat="product in products">
   <div ng-class="getRowClass($index)">
       <div class="col-sm-4" >
           <!-- your code -->
       </div>
   </div>

a następnie w kontrolerze

$scope.getRowClass = function(index){
    if(index%3 == 0){
     return "row";
    }
}

Po połączeniu wielu odpowiedzi i sugestii tutaj, jest to moja ostateczna odpowiedź, która działa dobrze flex, która pozwala nam tworzyć kolumny o równej wysokości, sprawdza również ostatni indeks i nie musisz powtarzać wewnętrznego HTML. Nie używa clearfix:

<div ng-repeat="prod in productsFiltered=(products | filter:myInputFilter)" ng-if="$index % 3 == 0" class="row row-eq-height">
    <div ng-repeat="i in [0, 1, 2]" ng-init="product = productsFiltered[$parent.$parent.$index + i]"  ng-if="$parent.$index + i < productsFiltered.length" class="col-xs-4">
        <div class="col-xs-12">{{ product.name }}</div>
    </div>
</div>

Wyświetli coś takiego:

<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>
<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>

Mała modyfikacja w rozwiązaniu @alpar

<div data-ng-app="" data-ng-init="products=['A','B','C','D','E','F', 'G','H','I','J','K','L']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 6 == 0" class="row">
        <div class="col-xs-2" ng-repeat="idx in [0,1,2,3,4,5]">
        {{products[idx+$parent.$index]}} <!-- When this HTML is Big it's useful approach -->
        </div>
    </div>
</div>

jsfiddle

To zadziałało dla mnie, bez splatania ani niczego wymaganego:

HTML

<div class="row" ng-repeat="row in rows() track by $index">
    <div class="col-md-3" ng-repeat="item in items" ng-if="indexInRange($index,$parent.$index)"></div>
</div>

JavaScript

var columnsPerRow = 4;
$scope.rows = function() {
  return new Array(columnsPerRow);
};
$scope.indexInRange = function(columnIndex,rowIndex) {
  return columnIndex >= (rowIndex * columnsPerRow) && columnIndex < (rowIndex * columnsPerRow) + columnsPerRow;
};

Born Solutions to najlepsze rozwiązanie, wystarczy trochę poprawić, aby sprostać potrzebom, miałem różne responsywne rozwiązania i trochę się zmieniłem

<div ng-repeat="post in posts">
    <div class="vechicle-single col-lg-4 col-md-6 col-sm-12 col-xs-12">
    </div>
    <div class="clearfix visible-lg" ng-if="($index + 1) % 3 == 0"></div>
    <div class="clearfix visible-md" ng-if="($index + 1) % 2 == 0"></div>
    <div class="clearfix visible-sm" ng-if="($index + 1) % 1 == 0"></div>
    <div class="clearfix visible-xs" ng-if="($index + 1) % 1 == 0"></div>
</div>

Opierając się na odpowiedzi Alpara, oto bardziej uogólniony sposób podziału pojedynczej listy elementów na wiele kontenerów (wiersze, kolumny, zasobniki, cokolwiek):

<div class="row" ng-repeat="row in [0,1,2]">
  <div class="col" ng-repeat="item in $ctrl.items" ng-if="$index % 3 == row">
    <span>{{item.name}}</span>
  </div>
</div> 

dla listy 10 pozycji generuje:

<div class="row">
  <div class="col"><span>Item 1</span></div>
  <div class="col"><span>Item 4</span></div>
  <div class="col"><span>Item 7</span></div>
  <div class="col"><span>Item 10</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 2</span></div>
  <div class="col"><span>Item 5</span></div>
  <div class="col"><span>Item 8</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 3</span></div>
  <div class="col"><span>Item 6</span></div>
  <div class="col"><span>Item 9</span></div>
</div> 

Liczbę pojemników można szybko zakodować w funkcji kontrolera:

JS (ES6)

$scope.rowList = function(rows) {
  return Array(rows).fill().map((x,i)=>i);
}
$scope.rows = 2;

HTML

<div class="row" ng-repeat="row in rowList(rows)">
  <div ng-repeat="item in $ctrl.items" ng-if="$index % rows == row">
    ...

Takie podejście pozwala uniknąć powielania znaczników pozycji ( <span>{{item.name}}</span>w tym przypadku) w szablonie źródłowym - nie jest to wielka wygrana dla prostego zakresu, ale dla bardziej złożonej struktury DOM (którą miałem) pomaga to utrzymać szablon SUCHY.

Aktualizacja 2019 - Bootstrap 4

Ponieważ Bootstrap 3 używał pływaków, wymagało to clearfix resetowania co n (3 lub 4) kolumn ( .col-*) w.row aby zapobiec nierównomiernemu zawijaniu kolumn.

Teraz, gdy Bootstrap 4 używa flexboksa , nie ma już potrzeby zawijania kolumn oddzielnymi .rowtagami lub wstawiania dodatkowych elementów div, aby wymusić na colach zawijanie co n kolumn.

Możesz po prostu powtórzyć wszystkie kolumny w jednym .rowpojemniku.

Na przykład 3 kolumny w każdym wierszu wizualnym to:

<div class="row">
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     (...repeat for number of items)
</div>

Więc w przypadku Bootstrapa, powtórzenie ng to po prostu:

  <div class="row">
      <div class="col-4" ng-repeat="item in items">
          ... {{ item }}
      </div>
  </div>

Demo: https://www.codeply.com/go/Z3IjLRsJXX

Zrobiłem to tylko za pomocą boostrapa, musisz bardzo uważać na położenie rzędu i kolumny, oto mój przykład.

<section>
<div class="container">
        <div ng-app="myApp">
        
                <div ng-controller="SubregionController">
                    <div class="row text-center">
                        <div class="col-md-4" ng-repeat="post in posts">
                            <div >
                                <div>{{post.title}}</div>
                            </div>
                        </div>
                    
                    </div>
                </div>        
        </div>
    </div>
</div> 

</section>