Comment puis-je utiliser AngularJS ng-repeat avec Twitter Bootstrap de l'échafaudage?

Comment puis-je utiliser AngularJS ng-repeat pour afficher le code HTML suivant (Twitter Bootstrap Échafaudage)? Essentiellement, chaque troisième enregistrement, j'ai besoin de fermer le </div>, d'imprimer une <hr>, puis d'en ouvrir un autre <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>

J'ai créé un violon pour le code des démos.

http://jsfiddle.net/ADukg/261/

InformationsquelleAutor Shane Stillwell | 2012-06-15
  1. 15

    Une façon plus élégante est d'utiliser le modèle de vue de fournir un bloc de collecte et de laisser le manche comme

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

    et la coffeescript est assez simple

    # 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, []);

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

    InformationsquelleAutor bradgonesurfing
  2. 38

    Ici un moyen:

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

    Cette manière que fonctionne aussi si vous avez par exemple 7 éléments de données: sur les 3 dernières données, il n'affiche que l'article 7 et de ne pas essayer de montrer les présents de l'élément 8 et 9.

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

    MODIFIER: mis à Jour pour utiliser ng-si & angulaire 1.2.12

    • C'est en fait une jolie solution intelligente. Mais comment voulez-vous gérer le cas où l'ensemble de données de longueur n'est pas divisible par 3? Par exemple, dire que vous avez été l'affichage des images... $index+0 sur la dernière rangée de points à une img url, mais +1 et +2 sont vides.
    • Pensé à elle. Il suffit de ne ng-show="!(($index+x)>(art.longueur-1))" sur l'img, où x est 0, 1, 2, respectivement. Angulaire est aussi lisse.
    • C'est brillant. @andy ajouter de rob ng-show idée, ici et à vos violons!
    • Ok, mis à jour et édité 🙂
    • Manière très créative d'aborder cette question. Cependant, cette méthode rompt lorsque vous essayez d'utiliser un filtre, conduisant à la totalité des résultats inattendus. Exemple: jsfiddle.net/J2CTu
    • pour la solution intelligente.
    • Fourche et simplifiée, sans avoir de multiples travées jsfiddle.net/ivarprudnikov/mSwSW
    • Il se sent encore un peu maladroit, mais parce que la plupart du temps le bootstrap ligne sortent de l'emballage div que vous êtes en utilisant pour la ng-repeat directive. Je me sens comme il ne devrait pas être dur à mettre simplement un <hr/> après chaque élément répété sans exiger un complément de style.

    InformationsquelleAutor Andrew Joslin
  3. 16

    Se déplaçant sur des le plus facile de répondre. Je n'aime pas le solution originale en raison de la vide des éléments du dom qu'il produit. C'est pour les 3 divs par ligne.

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

    En fonction FieldsCtrl($champ):

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

    Si vous connaissez les champs.la longueur vous pouvez à la place des champs.range (), utilisez [0,3,6,9] etc

    • Cela a fonctionné pour moi!
    InformationsquelleAutor ahoereth
  4. 2

    De garder la vue de la logique du contrôleur et avoir plus de ré-utilisable de la solution, vous pouvez créer un filtre personnalisé qui divise le tableau en ligne groupes:

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

    Et dans la vue:

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

    Pour inclure les rh, vous pouvez utiliser le ng-repeat points de début et fin:

    <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 />
    • J'aime cela, en théorie. Dans la pratique, cependant, il jette un 10 $digest() iterations reached exception. Voir ce violon.
    • Grâce roufamatic. J'ai cherché et trouvé que ng-repeat utilise $watchCollection pour vérifier les changements. Comme $watchCollection n'est un peu de la comparaison du contenu du tableau, et mon "groupe" filtre retourne une nouvelle série de Tableaux à chaque fois son nom, angulaire pense que le tableau est en constante évolution. Un travail autour de l'initialisation du regroupées tableau avant de ng-repeat au lieu d'utiliser un filtre, à l'aide de ng-init ou dans le contrôleur. Mais alors il perd de l'élégance.
    InformationsquelleAutor WearyMonkey
  5. 2

    ng-repeat, lancez-ng-repeat-end de fin points semble un moyen pratique d'y parvenir :

    Qui conduit à un code simple

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

    Voir ce jsfiddle

    InformationsquelleAutor HammerGuy