Angulaire ng-repeat ajouter bootstrap ligne tous les 3 ou 4 cols

Haut voté réponse, bien qu'efficace, n'est pas ce que je considère être l'angulaire, ni est-il en utilisant bootstrap propres classes qui sont destinés à faire face à cette situation. Comme @claies mentionné, la .clearfix classe est destinée à de telles situations. À mon avis, le plus propre de la mise en œuvre est comme suit:

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

Cette structure permet d'éviter de désordre de l'indexation des produits de tableau, permet de nettoyer la notation point, et rend l'utilisation de la clearfix classe pour son usage prévu.

Bon, cette solution est loin plus simples que celles déjà ici, et permet à différentes largeurs de colonne pour les différentes largeurs.

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

Noter que le % 6 partie est supposé être égal au nombre de colonnes de ce type. Donc, si sur la colonne de l'élément que vous avez la classe col-lg-2 il y aura 6 colonnes, de sorte que l'utilisation ... % 6.

Cette technique (à l'exclusion de la ng-if) est documentée ici: Bootstrap docs

Merci pour vos suggestions, tu m'as eu sur le droit chemin !

C'est parti pour une explication complète :

• Par défaut AngularJS http get requête retourne un objet

• Donc, si vous voulez utiliser @Ariel Tableau.le prototype.bloc fonction, vous devez d'abord transformer les objets dans un tableau.

• Puis d'utiliser le bloc fonction DANS VOTRE CONTRÔLEUR sinon, si elle est utilisée directement dans ng-repeat, il vous amène à une infdig erreur. Le contrôleur final ressemble :

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

Et HTML devient :

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

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

De l'autre côté, j'ai décidé de retourner directement un tableau [] au lieu d'un objet {} à partir de mon fichier JSON. De cette façon, le contrôleur devient (veuillez noter que la syntaxe spécifique à la isArray:vrai) :

    //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 rester le même que ci-dessus.

OPTIMISATION

Dernière question en suspens est : comment faire pour le rendre 100% AngularJS sans extension de javascript tableau avec bloc de fonction ... si certaines personnes sont intéressées à nous montrer si ng-repeat, lancez-ng-repeat-end sont la voie à suivre ... je suis curieuse 😉

ANDREW SOLUTION

Grâce à @Andrew, nous savons maintenant que l'ajout d'un bootstrap clearfix classe tous les trois (ou quel que soit le nombre) de l'élément corrige le problème d'affichage de différents bloc de hauteur.

Donc HTML devient :

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

Et votre contrôleur reste assez soft avec retiré chunck fonction :

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

Vous pouvez le faire sans une directive, mais je ne suis pas sûr que c'est la meilleure façon.
Pour ce faire, vous devez créer la matrice de la matrice de données que vous souhaitez afficher dans le tableau,
et après que l'utilisation de 2 ng-repeat pour parcourir le tableau.

pour créer le tableau pour l'affichage utilisez cette fonction que les produits.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)];
        })
    );
}

et puis faire quelque chose comme ça à l'aide de 2 ng-repeat

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

Juste une autre petite amélioration sur @Duncan répondre et les autres des réponses basées sur clearfix élément.
Si vous voulez rendre le contenu cliquable vous aurez besoin d'un z-index > 0 ou clearfix du chevauchement entre le contenu et gérer le clic.

C'est le exemple ne fonctionne pas (vous ne pouvez pas voir le pointeur du curseur et en cliquant sur, ne fait rien):

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

Alors que c'est le fixe:

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

J'ai ajouté z-index: 1 pour avoir le contenu lever sur la clearfix et j'ai enlevé le div conteneur en utilisant à la place ng-repeat-start et ng-repeat-end (disponible à partir d'AngularJS 1.2) parce qu'il fait de z-index ne fonctionne pas.

Espérons que cette aide!

Mise à jour

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

La meilleure façon d'appliquer une classe est d'utiliser ng-classe.Il peut être utilisé pour appliquer des classes sur la base d'une condition.

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

et puis dans votre contrôleur

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

Après la combinaison de nombreuses réponses et suggestions ici, c'est ma dernière réponse, qui fonctionne bien avec flex, ce qui nous permet de faire des colonnes avec une égale hauteur, il vérifie également le dernier index, et vous n'avez pas besoin de répéter l'intérieur HTML. Il n'utilise pas 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>

Il va afficher quelque chose comme ceci:

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

Né Solutions à son meilleur, juste besoin d'un peu ajustez les pieds les besoins, j'ai eu différents sensible des solutions et un peu changé

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

Je l'ai fait uniquement à l'aide de bootstrap, vous devez être très prudent dans l'emplacement de la ligne et la colonne, voici mon exemple.

HTML:

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