Açısal ng-tekrar, her 3 veya 4 sütunda bir önyükleme satırı ekleyin

Her 3 sütunda bir önyükleme satırı sınıfını enjekte etmek için doğru modeli arıyorum. Buna ihtiyacım var çünkü cols sabit bir yüksekliğe sahip değil (ve ben bir tane düzeltmek istemiyorum), bu yüzden tasarımımı bozuyor!

İşte kodum:

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

Ancak her satırda yalnızca bir ürün görüntüler. Nihai sonuç olarak istediğim şey:

<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>

Bunu yalnızca ng-yineleme modeliyle (yönerge veya denetleyici olmadan) başarabilir miyim? Docs ve ng-repeat-uçtan tekrar başlama ng tanıtmak ama bu kullanılma şeklidir nasıl kullanılacağını bilemiyorum! Bunun, önyükleme şablonunda sıklıkla kullandığımız bir şey olduğunu hissediyorum! ? Teşekkürler

En çok oylanan cevap, etkili olsa da, açısal yol olarak düşündüğüm şey değil, ya da bu durumla başa çıkması amaçlanan bootstrap'in kendi sınıflarını kullanmak değil. @Claies'in bahsettiği gibi, .clearfixsınıf bu gibi durumlar içindir. Bence en temiz uygulama şu şekilde:

<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>

Bu yapı, products dizisinin karmaşık indekslemesini önler, temiz nokta notasyonuna izin verir ve amaçlanan amaç için clearfix sınıfını kullanır.

Biraz geç olduğunu biliyorum ama yine de birine yardımcı olabilir. Ben böyle yaptım:

<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

Tamam, bu çözüm zaten burada olanlardan çok daha basit ve farklı cihaz genişlikleri için farklı sütun genişliklerine izin veriyor.

<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>

Parçanın ortaya % 6çıkan sütun sayısına eşit olması gerektiğine dikkat edin . Öyleyse, sütun elemanında sınıfa sahipseniz col-lg-26 sütun olacaktır, bu yüzden kullanın ... % 6.

Bu teknik (hariç ng-if) aslında burada belgelenmiştir: Bootstrap belgeleri

Başarmak istediğiniz şey yararlı olsa da, göz ardı edebileceğinize inandığım çok daha basit bir seçenek daha var.

Doğru söylüyorsunuz, sabit yükseklikte olmayan sütunlarınız olduğunda Bootstrap tabloları garip davranıyor. Ancak, bu sorunla mücadele etmek ve duyarlı sıfırlamalar gerçekleştirmek için oluşturulmuş bir önyükleme sınıfı vardır .

<div class="clearfix"></div>kayan değerlerin sıfırlanmasına ve sütunların doğru konumlarına dönmesine izin vermek için her yeni satırın başlangıcından önce bir boşluk oluşturun .

işte bir bootply .

Önerileriniz için teşekkürler, beni doğru yoldan buldunuz!

Tam bir açıklama için gidelim:

• Varsayılan olarak AngularJS http sorgusu bir nesne döndürür

• Yani @Ariel Array.prototype.chunk işlevini kullanmak istiyorsanız, önce nesneyi bir diziye dönüştürmeniz gerekir.

• Ve sonra DENETLEYİCİNİZDEKİ yığın işlevini kullanmak, aksi takdirde doğrudan ng-yinelemede kullanılırsa, sizi bir bilgi hatasına götürür . Son kontrolör şunlara bakar:

  // 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);
  });

Ve HTML şu hale gelir:

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

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

Öte yandan, JSON dosyamdan bir nesne {} yerine doğrudan bir dizi [] döndürmeye karar verdim. Bu şekilde, denetleyici olur (lütfen belirli sözdizimine dikkat edin isArray: 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 yukarıdakiyle aynı kalır.

OPTIMIZATION

Şüpheyle ilgili son soru şudur: chunk işleviyle javascript dizisini genişletmeden% 100 AngularJS nasıl yapılır ... eğer bazı insanlar bize ng-tekrar-başlangıç ​​ve ng-tekrar-sonun gidilecek yol olup olmadığını göstermekle ilgileniyorsa .. . Merak ediyorum ;)

ANDREW'İN ÇÖZÜMÜ

@Andrew sayesinde, artık her üç (veya herhangi bir sayıdaki) öğeye bir bootstrap clearfix sınıfı eklemenin, farklı blok yüksekliğinden gelen görüntü sorununu düzelttiğini biliyoruz.

Böylece HTML şu hale gelir:

<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}}

Ve kontrol cihazınız kaldırılan parça işlevi ile oldukça yumuşak kalır :

// 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;
        });

Yönerge olmadan da yapabilirsiniz ama bunun en iyi yol olduğundan emin değilim. Bunu yapmak için, tabloda görüntülemek istediğiniz verilerden dizi dizisi oluşturmalı ve bundan sonra dizi boyunca yinelemek için 2 ng-tekrar kullanmalısınız.

gösterim için dizi oluşturmak için bu işlevi şu şekilde kullanın products.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)];
        })
    );
}

ve sonra 2 ng-tekrar kullanarak böyle bir şey yapın

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

Alpar çözümüne dayalı olarak, yalnızca onaylanmış ng-tekrarlı şablonlar kullanılarak. Hem dolu hem de kısmen boş satırlarla çalışır:

<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

Sadece şablonda çalışan bir çözüm yaptım. Çözüm şudur

    <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>

Nokta verileri iki kez kullanıyor, biri dış döngü için. Ekstra aralık etiketleri kalacaktır, ancak bu nasıl değiş tokuş yaptığınıza bağlıdır.

3 sütunlu bir düzendeyse, şöyle olacak

    <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>

Dürüst olmak gerekirse istedim

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

Yine de işe yaramadı.

@Duncan cevabıyla ilgili bir başka küçük gelişme ve diğerleri, clearfix öğesine dayalı cevaplar. İçeriği tıklanabilir hale getirmek istiyorsanız, z-indexüzerinde> 0'a ihtiyacınız olacak veya clearfix, içerikle çakışacak ve tıklamayı işleyecektir.

Bu çalışmayan örnektir (imleç işaretçisini göremezsiniz ve tıklamak hiçbir şey yapmaz):

<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>

Bu düzeltilmiş olanı iken :

<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>

Ben ekledik z-index: 1Clearfix üzerinden içerik zam olması ve kap kullanmak yerine div kaldırdık ng-repeat-startve ng-repeat-endçalışmıyor z endeksi yapmış (angularjs 1.2 den temin edilebilir).

Bu yardımcı olur umarım!

Güncelleme

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

Bunu ng sınıfını kullanarak çözdüm

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

Bir sınıfı uygulamanın en iyi yolu ng sınıfını kullanmaktır. Bazı koşullara göre sınıfları uygulamak için kullanılabilir.

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

ve sonra kontrol cihazınızda

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

Burada birçok cevabı ve öneriyi birleştirdikten sonra, bu benim son cevabımdır, ki bu iyi çalışır flex, eşit yükseklikte sütunlar oluşturmamızı sağlar, aynı zamanda son dizini de kontrol eder ve iç HTML'yi tekrarlamanıza gerek yoktur. Kullanmaz 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>

Şöyle bir çıktı verecektir:

<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>

@Alpar'ın çözümünde küçük bir değişiklik

<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

Bu benim için çalıştı, ekleme veya herhangi bir şey gerekli değil:

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 en iyisi, ihtiyaçları karşılamak için biraz tweek'e ihtiyacım var, farklı duyarlı çözümlere sahiptim ve biraz değiştim

<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>

Alpar'ın cevabına dayanarak, işte tek bir öğe listesini birden çok kaba (satırlar, sütunlar, kovalar, her neyse) bölmenin daha genel bir yolu:

<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> 

10 öğelik bir liste için şunu oluşturur:

<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> 

Kapların sayısı hızlı bir şekilde bir kontrolör işlevine kodlanabilir:

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">
    ...

Bu yaklaşım <span>{{item.name}}</span>, kaynak şablonda öğe işaretlemesinin ( bu durumda) kopyalanmasını önler - basit bir aralık için büyük bir kazanç değil, ancak daha karmaşık bir DOM yapısı için (ki sahip olduğum) bu, şablonun KURU kalmasına yardımcı olur.

Güncelleme 2019 - Bootstrap 4

Bootstrap 3 yüzer kullandığından, sütunların eşit olmayan şekilde kaydırılmasını önlemek için clearfix'in her n (3 veya 4) sütunu ( .col-*) sıfırlamasını gerektirdi .row.

Artık Bootstrap 4 flexbox kullandığına göre , sütunları ayrı .rowetiketlere sarmaya veya sütunların her n sütunu sarmaya zorlamak için fazladan div'ler eklemeye artık gerek yok .

Tüm sütunları tek bir .rowkapta tekrarlayabilirsiniz .

Örneğin, her görsel satırdaki 3 sütun:

<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>

Öyleyse Bootstrap için ng-tekrarı basitçe:

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

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

Ben bunu sadece boostrap kullanarak yaptım, satır ve sütun konumunda çok dikkatli olmalısınız, işte benim örneğim.

<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>