Répétition horizontale avec de nouveaux sauts de ligne
En travaillant avec Bootstrap et AngularJS, existe-t-il un moyen de ng-repeat horizontalement avec une nouvelle ligne pour chaque quantité d'éléments définie?
J'ai joué avec ng-class pour accomplir cela Fiddle, mais le problème, c’est que je ne peux pas avoir les div à gauche dans la rangée initiale ... Avez-vous des idées, est-ce que je ne pense pas à quelque chose ou est-ce que cela serait mieux fait avec une directive?
Voici mon code (exemple vivant dans le lien de violon ci-dessus):
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="num in numbers"
ng-class="{'row': ($index)%2==0, 'col-md-6': ($index)%2!=0}">
<div ng-class="{'col-md-6': ($index)%2==0}">
{{num}}
</div>
</div>
</div>
</body>
var myApp = angular.module('myApp', [])
.controller('MyCtrl', function ($scope) {
$scope.numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
});
.row {
clear: both;
width: 100%;
border: 1px solid red;
}
.col-md-6 {
width: 50%;
float: left;
border: 1px solid blue;
}
Ce que vous faisiez avec ng-class était intelligent. Je n'avais jamais pensé à utiliser %2 dans l'expression.
Mais pour référence future, il existe un moyen légèrement plus simple d’y parvenir: ng-class-even et ng-class-odd . Cela fait la même chose que ce que vous faisiez, mais un peu plus propre:
<div ng-repeat="num in numbers" ng-class-even="'md-col-6'" ng-class-odd="'row'">
{{num}}
</div>
Mais cela ne résout pas votre problème. Si je vous ai bien compris, vous voulez une ligne avec deux colonnes dans cette ligne. Le moyen le plus simple auquel je puisse penser est de diviser les tableaux. Placez la répétition sur le div, puis ayez 2 span dans le div. Je pense que l’un des problèmes que vous aviez initialement, c’est que vous répétiez un seul div et tentiez de traiter cet élément block comme un inline
Manette
myApp.controller('MyCtrl', function ($scope) {
$scope.evens = ["2","4","6","8","10","12","14"];
$scope.odds = ["1","3","5","7","9","11","13"];
});
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="odd in odds" class="row">
<span class="span3">{{odd}}</span>
<span class="span2">{{evens[$index]}}</span>
</div>
</div>
Etant donné que vous utilisez la version 1.1.5, cela vous ouvre également une nouvelle directive: ng-if ! Vous pouvez également utiliser ng-switch pour effectuer certains affichages de logique conditionnelle.
Vous n'avez pas inclus bootstrap dans votre violon, et pour une raison quelconque, jsFiddle n'a pas pu afficher bootstrap. J'ai donc créé des classes CSS temporaires qui ressembleraient un peu à bootstraps class="span"
Si vous travaillez avec Bootstrap 3 et AngularJS, vous pouvez déclarer un nouveau filtre qui renverra un tableau de tranches de sous-tableau, puis effectuera deux répétitions ng.
Ça va ressembler à ça:
<div class="row" ng-repeat="row in filtered = (arr | splitArrayFilter:3)">
<div class="col-md-4" ng-repeat="n in row">
<h3>{{n}}</h3>
</div>
</div>
app.filter('splitArrayFilter', function() {
return function(arr, lengthofsublist) {
if (!angular.isUndefined(arr) && arr.length > 0) {
var arrayToReturn = [];
var subArray=[];
var pushed=true;
for (var i=0; i<arr.length; i++){
if ((i+1)%lengthofsublist==0) {
subArray.Push(arr[i]);
arrayToReturn.Push(subArray);
subArray=[];
pushed=true;
} else {
subArray.Push(arr[i]);
pushed=false;
}
}
if (!pushed)
arrayToReturn.Push(subArray);
console.log(JSON.stringify(arrayToReturn));
return arrayToReturn;
}
}
});
Vous pouvez le trouver sur Plunker ici: http://plnkr.co/edit/rdyjRtZhzHjWiWDJ8FKJ?p=preview Pour une raison quelconque, la vue dans Plunker ne prend pas en charge l’initialisation de trois colonnes, mais si vous l’ouvrez dans Embedded voir ou dans les navigateurs, vous pouvez voir que cela fonctionne.
Pas besoin d'ajouter .row class .. J'ai fait ceci:
HTML:
<div ng-repeat="product in allProducts">
<div class="my-col-50">
<h1>{{product.title}}</h1>
</div>
</div>
CSS:
.my-col-50{float:left;width:50%;}
et ça marche comme un charme.
Bien que ce ne soit pas la manière "appropriée" de le faire, il existe un moyen d'y parvenir en utilisant CSS.
Par exemple, il s’agit d’une mise en page à 3 colonnes:
HTML:
<div class="row">
<div ng-repeat="(key, pod) in stats.pods" class="pod-wrap">
<div ng-if="objectCheck(pod) == false" class="col-md-4 col-sm-4 pod">
<div>
<h2 ng-bind="key"></h2>
<p class="total" ng-bind="pod | number"></p>
</div>
</div>
<div ng-if="objectCheck(pod) == true" class="col-md-4 col-sm-4 pod">
<div>
<h2 ng-bind="key"></h2>
<div ng-repeat="(type, value) in pod track by $index">
<p class="status"><% type %> <small><% value %></small></p>
</div>
</div>
</div>
</div>
</div>
CSS:
.pod-wrap:nth-of-type(3n):after {
display: table;
content: '';
clear: both;
}
J'ai essayé deux des suggestions données ici… Celle de yshaool fonctionne bien mais, comme je l'ai commenté, donnez-moi cette erreur de boucle infinie.
Ensuite, j'ai essayé quelque chose comme ci-dessous:
<div class="row" ng-repeat="row in split($index, 3, row.Attempts)">
<div class="col-md-4" ng-repeat="attempt in row">
<div>Attempt {{row.AttemptNumber}}</div>
<div>{{row.Result}}</div>
</div>
</div>
et la fonction:
$scope.split = function (index, length, attempts) {
var ret = attempts.slice(index * length, (index * length) + length);
console.log(JSON.stringify(ret));
return ret;
}
allais quelque part avec ça quand je compris qu'il pourrait être aussi simple que
<div ng-repeat="attempt in row.Attempts">
<div class="col-md-4">
<div>Attempt {{attempt.AttemptNumber}}</div>
<div>{{attempt.Result}}</div>
</div>
</div>
utiliser "col-md-4" fait l'affaire, car je n'ai besoin que de scinder en utilisant trois colonnes par ligne .. (laissez bootstrap faire le travail!). ...
En fonction du nombre de colonnes dont vous avez besoin dans votre modèle, créez des fragments de la source de données d'origine dans votre contrôleur.
$scope.categories = data //contains your original data source;
$scope.chunkedCategories = [] //will Push chunked data into this;
//dividing into chunks of 3 for col-4. You can change this
while ($scope.categories.length > 0)
$scope.chunkedCategories.Push($scope.categories.splice(0, 3));
Dans votre modèle, vous pouvez maintenant faire ce qui suit
<div class="row" ng-repeat="categories in chunkedCategories">
<div class="col-xs-4" ng-repeat="category in categories">
<h2>{{category.title}}</h2>
</div>
</div>
Mon approche consistait à utiliser la variable $ index, créée et mise à jour par AngularJS dans une directive ng-repeat, pour déclencher un appel au hack clearfix CSS qui, à son tour, réinitialise une nouvelle ligne.
J'utilise les versions suivantes: AngularJS 1.5.5 et Bootstrap 3.3.4
<!-- use bootstrap's grid structure to create a row -->
<div class="row">
<!-- Cycle through a list: -->
<!-- use angular's ng-repeat directive -->
<div ng-repeat="item in itemList">
<!-- Start a new row: -->
<!-- use the css clearfix hack to reset the row -->
<!-- for every item $index divisible by 3. -->
<!-- note that $index starts at 0. -->
<div ng-if="$index % 3 == 0" class="clearfix"></div>
<!-- Create a column: -->
<!-- since we want 3 "item columns"/row, -->
<!-- each "item column" corresponds to 4 "Bootstrap columns" -->
<!-- in Bootstrap's 12-column/row system -->
<div class="col-sm-4">
{{item.name}}
</div>
</div>
</div>
Pour garder la solution bootstrap formatée, j'ai résolu ce problème en utilisant ng-class
<div ng-repeat="item in items">
<div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
<div class="col-md-3">
{{item.name}}
</div>
</div>
</div>