Ng-Repeat matrice à lignes et colonnes

C'est plus un style/balisage problème qu'une AngularJS. Si vous le voulez vraiment, vous pouvez le faire:

<span ng:repeat="(index, value) in array">
    {{value}}<br ng:show="(index+1)%3==0" />
</span>

http://jsfiddle.net/JG3A5/

OriginalL'auteur Jahed

Si tous vos articles sont dans un tableau unique, votre meilleur pari est de faire une grille en CSS. Cet article devrait vous être utile: http://css-tricks.com/dont-overthink-it-grids/

Vous pouvez utiliser $index de ng-repeat pour appliquer la bonne catégorie pour votre colonne (dans ce cas, un 4 colonne de la grille):

<div class="col-{{ $index % 4 }}"></div>

Si vous avez un 2 dimensions tableau (divisée en lignes et colonnes), qui s'ouvre plus de possibilités comme le fait à l'aide d'un tableau HTML.

OriginalL'auteur ksimons

Entre la Performance, la Dynamique et la Lisibilité

Il semble mettre de la logique dans votre JavaScript est la meilleure méthode. Je voudrais juste mordre la balle et regarder dans:

function listToMatrix(list, n) {
    var grid = [], i = 0, x = list.length, col, row = -1;
    for (var i = 0; i < x; i++) {
        col = i % n;
        if (col === 0) {
            grid[++row] = [];
        }
        grid[row][col] = list[i];
    }
    return grid;
}

var matrix = listToMatrix(lists, 3);
console.log('#RedPill', matrix);

• @ Params: (liste, n)
  • Où liste est un tableau et n est un nombre arbitraire de colonnes souhaité par ligne
• @ Return: Un matroid
• @ Remarque: Cette fonction est conçue pour orienter un matroid basée sur un nombre arbitraire de colonnes, avec des écarts dans le nombre de ses lignes. En d'autres termes, x = désiré-colonnes, y = n.

Vous pouvez ensuite créer un angulaires filter à gérer:

Filtre:

angular.module('lists', []).filter('matrical', function() {
    return function(list, columns) {
        return listToMatrix(list, columns);
    };
});

Contrôleur:

function listOfListsController($scope) {
    $scope.lists = $http.get('/lists');
}

Vue:

<div class="row" ng-repeat="row in (lists | matrical:3)">
    <div class="col col-33" ng-repeat="list in row">{{list.name}}</div>
</div>

Avec cela, vous pouvez voir que vous obtenez n nombre de lignes, chacune contenant "3" de colonnes. Lorsque vous modifiez le nombre de colonnes désirées, vous remarquerez le nombre de lignes est modifiée en conséquence (en supposant que la liste de longueur est toujours la même chose 😉).

Voici un violon.

Note, que vous obtenez de l'ol' Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!. C'est parce Angulaire est rappelant la matrical fonction à chaque itération. Apparemment, vous pouvez utiliser le as results alias pour éviter Angulaire de la réévaluation de la collection, mais j'ai pas eu de chance. Pour cela, il peut être préférable de filtre de la grille à l'intérieur de votre contrôleur et utiliser cette valeur pour votre répéteur: $filter('matrical')(items) -- mais merci de poster si vous trouver un moyen élégant de filtrage dans le ng-repeat.

Je tiens à souligner, encore une fois, vous êtes probablement en direction vers le bas d'une ruelle sombre, en essayant d'écrire la logique de votre point de vue, mais je vous encourage à l'essayer, à votre avis, si vous ne l'avez pas déjà.

Modifier

L'utilisation de cet algorithme doit être combiné avec un Matrical de la Structure des Données à fournir des méthodes de push, pop, splice, et d'autres méthodes -- en tandem avec des logiques à compléter Bi-Directionnelle de Liaison de Données si vous le souhaitez. En d'autres termes, la liaison de données ne fonctionnent pas de la case (bien sûr) que lorsqu'un nouvel élément est ajouté à votre liste, une réévaluation de l'ensemble de la liste doivent avoir lieu pour garder la matrice de l'intégrité structurelle.

Suggestion: Utiliser le $filter('matrical')($scope.list) syntaxe en combinaison avec $scope.$watch et recompiler/calculer l'élément de positions de la matrice.

Cheers!

OriginalL'auteur Cody