comment diviser les données ng-repeat avec trois colonnes à l'aide de bootstrap

J'utilise ng-repeat avec mon code J'ai un nombre 'n' de zone de texte basé sur ng-repeat. Je souhaite aligner la zone de texte sur trois colonnes.

c'est mon code

<div class="control-group" ng-repeat="oneExt in configAddr.ext">
    {{$index+1}}. 
    <input type="text" name="macAdr{{$index+1}}" 
           id="macAddress" ng-model="oneExt.newValue" value=""/>
</div>

L'approche la plus fiable et la plus techniquement correcte consiste à transformer les données dans le contrôleur. Voici une simple fonction et utilisation de bloc.

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i<arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);

Ensuite, votre vue ressemblerait à ceci:

<div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>

Si vous avez des entrées dans le ng-repeat, vous voudrez probablement décoller / rejoindre les tableaux lorsque les données sont modifiées ou lors de la soumission. Voici à quoi cela ressemblerait dans un $watch, de sorte que les données soient toujours disponibles dans le format d'origine fusionné:

$scope.$watch('chunkedData', function(val) {
  $scope.data = [].concat.apply([], val);
}, true); // deep watch

Beaucoup de gens préfèrent accomplir cela dans la vue avec un filtre. Ceci est possible, mais ne doit être utilisé qu'à des fins d'affichage! Si vous ajoutez des entrées dans cette vue filtrée, cela causera des problèmes qui peuvent être résolus, mais qui ne sont ni jolis ni fiables .

Le problème avec ce filtre est qu'il renvoie à chaque fois de nouveaux tableaux imbriqués. Angular surveille la valeur de retour du filtre. La première fois que le filtre s'exécute, Angular connaît la valeur, puis l'exécute à nouveau pour s'assurer qu'elle a bien été modifiée. Si les deux valeurs sont identiques, le cycle est terminé. Sinon, le filtre se déclenchera encore et encore jusqu'à ce qu'ils soient identiques, ou Angular se rend compte qu'une boucle de digestion infinie se produit et s'arrête. Étant donné que les nouveaux tableaux / objets imbriqués n'étaient pas précédemment suivis par Angular, il voit toujours la valeur de retour comme différente de la précédente. Pour corriger ces filtres "instables", vous devez envelopper le filtre dans une memoizefonction. lodasha une memoizefonction et la dernière version de lodash comprend également une chunkfonction, nous pouvons donc créer ce filtre très simplement en utilisantnpmmodules et compiler le script avec browserifyou webpack.

N'oubliez pas: affichage uniquement! Filtrez dans le contrôleur si vous utilisez des entrées!

Installez lodash:

npm install lodash-node

Créez le filtre:

var chunk = require('lodash-node/modern/array/chunk');
var memoize = require('lodash-node/modern/function/memoize');

angular.module('myModule', [])
.filter('chunk', function() {
  return memoize(chunk);
});

Et voici un exemple avec ce filtre:

<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
  <div class="column" ng-repeat="item in row">
    {{($parent.$index*row.length)+$index+1}}. {{item}}
  </div>
</div>

Commander les articles verticalement

1  4
2  5
3  6

Concernant les colonnes verticales (liste de haut en bas) plutôt qu'horizontales (de gauche à droite), l'implémentation exacte dépend de la sémantique souhaitée. Les listes qui se divisent de manière inégale peuvent être distribuées de différentes manières. Voici une façon:

<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
function columnize(input, cols) {
  var arr = [];
  for(i = 0; i < input.length; i++) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

Cependant, le moyen le plus direct et le plus simple d'obtenir des colonnes est d'utiliser des colonnes CSS :

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>

Cette solution est très simple:

JSON:

[{id:"1",name:"testA"},{id:"2",name:"test B"},{id:"3",name:"test C"},{id:"4",name:"test D"},{id:"5",name:"test E"}]

HTML:

<div ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="item in items" ng-switch on="$index % 3">
      <td ng-switch-when="0">
        {{items[$index].id}} {{items[$index].name}}
      </td>
      <td ng-switch-when="0">
        <span ng-show="items[$index+1]">
          {{items[$index+1].id}} {{items[$index+1].name}}
        </span>
      </td>
      <td ng-switch-when="0">
        <span ng-show="items[$index+2]">    
          {{items[$index+2].id}} {{items[$index+2].name}}
        </span>
      </td>
    </tr>
  </table>
</div>

DEMO dans FIDDLE

Une solution propre et adaptable qui ne nécessite pas de manipulation de données :

Le HTML:

<div class="control-group" class="label"
    ng-repeat="oneExt in configAddr.ext"
    ng-class="{'new-row': startNewRow($index, columnBreak) }">
    {{$index+1}}. 
    <input type="text" name="macAdr{{$index+1}}" 
       id="macAddress{{$index}}" ng-model="oneExt.newValue" />
</div>

Le CSS:

.label {
    float: left;
    text-align: left;
}
.new-row {
    clear: left;
}

Le JavaScript:

$scope.columnBreak = 3; //Max number of colunms
$scope.startNewRow = function (index, count) {
    return ((index) % count) === 0;
};

Il s'agit d'une solution simple pour rendre les données en lignes et en colonnes de manière dynamique sans avoir à manipuler le tableau de données que vous essayez d'afficher. De plus, si vous essayez de redimensionner la fenêtre du navigateur, vous pouvez voir que la grille s'adapte dynamiquement à la taille de l'écran / div.

(J'ai également ajouté un suffixe {{$ index}} à votre identifiant car ng-repeat essaiera de créer plusieurs éléments avec le même identifiant si vous ne le faites pas.)

Un exemple de travail similaire

La réponse de m59 est plutôt bonne. La seule chose que je n'aime pas, c'est qu'il utilise divs pour ce qui pourrait être des données pour une table.

Donc, en conjonction avec le filtre de m59 (réponse quelque part ci-dessus), voici comment l'afficher dans un tableau.

<table>
    <tr class="" ng-repeat="rows in foos | chunk:2">
        <td ng-repeat="item in rows">{{item}}</td>
    </tr>
</table>

Voici un moyen plus simple:

<table>
    <tr ng-repeat="item in lists" ng-hide="$index%2!==0">
        <td>
            <label>{{ lists[$index].name}}</label>
        </td>
        <td ng-hide="!lists[$index+1]">
            <label>{{ lists[$index+1].name}}</label>
        </td>
    </tr>
</table>

La réponse de Cumulo Nimbus m'est utile mais je veux que cette grille soit entourée d'un div qui peut afficher la barre de défilement lorsque la liste est trop longue.

Pour ce faire, j'ai ajouté style="height:200px; overflow:auto"à un div autour de la table, ce qui l'affiche sous forme de colonne unique.

Fonctionne maintenant pour une longueur de tableau de un.

J'ai une fonction et je l'ai stockée dans un service afin de pouvoir l'utiliser partout dans mon application:

Un service:

app.service('SplitArrayService', function () {
return {
    SplitArray: function (array, columns) {
        if (array.length <= columns) {
            return [array];
        };

        var rowsNum = Math.ceil(array.length / columns);

        var rowsArray = new Array(rowsNum);

        for (var i = 0; i < rowsNum; i++) {
            var columnsArray = new Array(columns);
            for (j = 0; j < columns; j++) {
                var index = i * columns + j;

                if (index < array.length) {
                    columnsArray[j] = array[index];
                } else {
                    break;
                }
            }
            rowsArray[i] = columnsArray;
        }
        return rowsArray;
    }
}

});

Manette:

$scope.rows   = SplitArrayService.SplitArray($scope.images, 3); //im splitting an array of images into 3 columns

Balisage:

 <div class="col-sm-12" ng-repeat="row in imageRows">
     <div class="col-sm-4" ng-repeat="image in row">
         <img class="img-responsive" ng-src="{{image.src}}">
     </div>
 </div>

Mon approche était un mélange de choses.

Mon objectif était d'avoir une grille s'adaptant à la taille de l'écran. Je voulais 3 colonnes pour lg, 2 colonnes pour smet mdet 1 colonne pour xs.

Tout d'abord, j'ai créé la fonction d'étendue suivante, en utilisant le $windowservice angulaire :

$scope.findColNumberPerRow = function() {
    var nCols;
    var width = $window.innerWidth;

    if (width < 768) {
        // xs
        nCols = 1;
    }
    else if(width >= 768 && width < 1200) {
         // sm and md
         nCols = 2
    } else if (width >= 1200) {
        // lg
        nCols = 3;
    }
    return nCols;
};

Ensuite, j'ai utilisé la classe proposée par @Cumulo Nimbus:

.new-row {
    clear: left;
}

Dans le div contenant le ng-repeat, j'ai ajouté la resizabledirective, comme expliqué dans cette page , de sorte qu'à chaque fois que la fenêtre est redimensionnée, le $windowservice angulaire est mis à jour avec les nouvelles valeurs.

En fin de compte, dans le div répété, j'ai:

ng-repeat="user in users" ng-class="{'new-row': ($index % findColNumberPerRow() === 0) }"

S'il vous plaît, faites-moi savoir les défauts de cette approche.

J'espère que cela peut être utile.

Une astuce simple avec le CSS "clearfix" recommandé par Bootstrap:

<div class="row">
      <div ng-repeat-start="value in values" class="col-md-4">
        {{value}}
      </div>
      <div ng-repeat-end ng-if="$index % 3 == 0" class="clearfix"></div>
</div>

De nombreux avantages: efficace, rapide, utilisant les recommandations Boostrap, évitant les éventuels problèmes de $ digest et ne modifiant pas le modèle angulaire.

Cet exemple produit un répéteur imbriqué où les données externes incluent un tableau interne que je voulais répertorier dans deux colonnes. Le concept serait vrai pour trois colonnes ou plus.

Dans la colonne intérieure, je répète la «ligne» jusqu'à ce que la limite soit atteinte. La limite est déterminée en divisant la longueur du tableau d'éléments par le nombre de colonnes souhaité, dans ce cas par deux. La méthode de division se trouve sur le contrôleur et reçoit la longueur actuelle du tableau en tant que paramètre. La fonction de tranche JavaScript (0, array.length / columnCount) a ensuite appliqué la limite au répéteur.

Le deuxième répéteur de colonne est alors appelé et répète la tranche (array.length / columnCount, array.length) qui produit la seconde moitié du tableau dans la deuxième colonne.

<div class="row" ng-repeat="GroupAccess in UsersController.SelectedUser.Access" ng-class="{even: $even, odd: $odd}">
    <div class="col-md-12 col-xs-12" style=" padding-left:15px;">
        <label style="margin-bottom:2px;"><input type="checkbox" ng-model="GroupAccess.isset" />{{GroupAccess.groupname}}</label>
    </div>
    <div class="row" style=" padding-left:15px;">
        <div class="col-md-1 col-xs-0"></div>
        <div class="col-md-3 col-xs-2">
            <div style="line-height:11px; margin-left:2px; margin-bottom:2px;" ng-repeat="Feature in GroupAccess.features.slice(0, state.DivideBy2(GroupAccess.features.length))">
                <span class="GrpFeature">{{Feature.featurename}}</span>
            </div>
        </div>
        <div class="col-md-3 col-xs-2">
            <div style="line-height:11px; margin-left:2px; margin-bottom:2px;" ng-repeat="Feature in GroupAccess.features.slice( state.DivideBy2(GroupAccess.features.length), GroupAccess.features.length )">
                <span class="GrpFeature">{{Feature.featurename}}</span>
            </div>
        </div>
        <div class="col-md-5 col-xs-8">
        </div>
    </div>
</div>


// called to format two columns
state.DivideBy2 = function(nValue) {
    return Math.ceil(nValue /2);
};

J'espère que cela aidera à regarder la solution d'une autre manière encore. (PS c'est mon premier message ici! :-))

Je répare sans .row

<div class="col col-33 left" ng-repeat="photo in photos">
   Content here...
</div>

et css

.left {
  float: left;
}

Voici une façon facile de le faire. C'est plus manuel et se termine par un balisage désordonné. Je ne le recommande pas, mais dans certaines situations, cela pourrait être utile.

Voici un lien de violon http://jsfiddle.net/m0nk3y/9wcbpydq/

HTML:

<div ng-controller="myController">
    <div class="row">
        <div class="col-sm-4">
            <div class="well">
                <div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3)">
                {{ person.name }}
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="well">
                <div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3):Math.ceil(data.length/3)">
                {{ person.name }}
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="well">
                <div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3):Math.ceil(data.length/3)*2">
                {{ person.name }}
                </div>
            </div>
        </div>
    </div>
</div>

JS:

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {

    $scope.Math = Math;
    $scope.data = [
        {"name":"Person A"},
        ...
    ];
});

Cette configuration nous oblige à utiliser des Maths sur le balisage: /, vous devrez donc injecter Math en ajoutant cette ligne: $scope.Math = Math;

Toutes ces réponses semblent massivement surfaites.

La méthode de loin la plus simple serait de configurer les div d'entrée dans un bootstrap de colonne col-md-4, puis bootstrap le formatera automatiquement en 3 colonnes en raison de la nature de 12 colonnes du bootstrap:

<div class="col-md-12">
    <div class="control-group" ng-repeat="oneExt in configAddr.ext">
        <div class="col-md-4">
            <input type="text" name="macAdr{{$index}}"
                   id="macAddress" ng-model="oneExt.newValue" value="" />
        </div>
    </div>
</div>

<div class="row">
  <div class="col-md-4" ng-repeat="remainder in [0,1,2]">
    <ul>
      <li ng-repeat="item in items" ng-if="$index % 3 == remainder">{{item}}</li>
    </ul>
  </div>
</div>

Sur la base de la très bonne réponse de m59. J'ai trouvé que les entrées de modèle seraient floues si elles changeaient, donc vous ne pouviez changer qu'un caractère à la fois. Ceci est un nouveau pour les listes d'objets pour tous ceux qui en ont besoin:

MODIFIER Mise à jour pour gérer plusieurs filtres sur une seule page

app.filter('partition', function() {
  var cache = {}; // holds old arrays for difference repeat scopes
  var filter = function(newArr, size, scope) {
    var i,
      oldLength = 0,
      newLength = 0,
      arr = [],
      id = scope.$id,
      currentArr = cache[id];
    if (!newArr) return;

    if (currentArr) {
      for (i = 0; i < currentArr.length; i++) {
        oldLength += currentArr[i].length;
      }
    }
    if (newArr.length == oldLength) {
      return currentArr; // so we keep the old object and prevent rebuild (it blurs inputs)
    } else {
      for (i = 0; i < newArr.length; i += size) {
        arr.push(newArr.slice(i, i + size));
      }
      cache[id] = arr;
      return arr;
    }
  };
  return filter;
}); 

Et ce serait l'utilisation:

<div ng-repeat="row in items | partition:3:this">
  <span class="span4">
    {{ $index }}
  </span>
</div>

Je suis nouveau dans bootstrap et angularjs, mais cela pourrait également faire Array par 4 éléments en un seul groupe, le résultat ressemblera presque à 3 colonnes. Cette astuce utilise le principe de la ligne de rupture bootstrap.

<div class="row">
 <div class="col-sm-4" data-ng-repeat="item in items">
  <div class="some-special-class">
   {{item.XX}}
  </div>
 </div>
</div>

Lodash a maintenant une méthode chunk intégrée que j'utilise personnellement: https://lodash.com/docs#chunk

Sur cette base, le code du contrôleur peut ressembler à ce qui suit:

$scope.groupedUsers = _.chunk( $scope.users, 3 )

Afficher le code:

<div class="row" ng-repeat="rows in groupedUsers">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>

Une autre méthode consiste à définir width:33.33%; float:leftun div wrapper comme celui-ci:

<div ng-repeat="right in rights" style="width: 33.33%;float: left;">
    <span style="width:60px;display:inline-block;text-align:right">{{$index}}</span>
    <input type="number" style="width:50px;display:inline-block" ">
</div>

Je me suis retrouvé dans un cas similaire, souhaitant générer des groupes d'affichage de 3 colonnes chacun. Cependant, bien que j'utilisais bootstrap, j'essayais de séparer ces groupes en différentes div parentales. Je voulais aussi créer quelque chose d'utile de manière générique.

Je l'ai approché avec 2 ng-repeatcomme ci-dessous:

<div ng-repeat="items in quotes" ng-if="!($index % 3)">
  <div ng-repeat="quote in quotes" ng-if="$index <= $parent.$index + 2 && $index >= $parent.$index">
                ... some content ...
  </div>
</div>

Cela rend très facile de passer à un nombre différent de colonnes et de les séparer en plusieurs div parent.

Juste au cas où quelqu'un voudrait un Angular 7 (et une version supérieure), voici un exemple que j'ai utilisé dans l'une de mes applications:

HTML:

                   <div class="container-fluid">
                    <div class="row" *ngFor="let reports of chunkData; index as i">
                        <div *ngFor="let report of reports" class="col-4 col-sm-4"
                            style="border-style:solid;background-color: antiquewhite">{{report}}</div>
                    </div>
                </div>

FICHIER .TS

export class ConfirmationPageComponent implements OnInit {
  chunkData = [];
  reportsArray = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6"];
  
  constructor() {}

  ngOnInit() {
    this.chunkData = this.chunk(this.reportsArray, 3);
  }

  chunk(arr, size) {
    var newArr = [];
    for (var i = 0; i < arr.length; i += size) {
      newArr.push(arr.slice(i, i + size));
    }
    return newArr;
  }
}

C'est une solution géniale pour créer dynamiquement de nouvelles colonnes / lignes en fonction de la quantité d'éléments que vous itérez à partir de la base de données. Merci!

cela répond à la question originale qui est de savoir comment obtenir 1,2,3 dans une colonne. - demandé par kuppu le 8 février 14 à 13:47

code angularjs:

function GetStaffForFloor(floor) {
    var promiseGet = Directory_Service.getAllStaff(floor);
    promiseGet.then(function (pl) {
        $scope.staffList = chunk(pl.data, 3); //pl.data; //
    },
    function (errorOD) {
        $log.error('Errored while getting staff list.', errorOD);
    });
}
function chunk(array, columns) {
    var numberOfRows = Math.ceil(array.length / columns);

    //puts 1, 2, 3 into column
    var newRow = []; //array is row-based.
    for (var i = 0; i < array.length; i++) {
        var columnData = new Array(columns);
        if (i == numberOfRows) break;
        for (j = 0; j < columns; j++)
        {
            columnData[j] = array[i + numberOfRows * j];
        }
        newRow.push(columnData); 
    }
    return newRow;

    ////this works but 1, 2, 3 is in row
    //var newRow = [];
    //for (var i = 0; i < array.length; i += columns) {
    //    newRow.push(array.slice(i, i + columns)); //push effectively does the pivot. array is row-based.
    //}
    //return newRow;
};

Afficher le code (note: en utilisant bootstrap 3):

<div class="staffContainer">
    <div class="row" ng-repeat="staff in staffList">
        <div class="col-md-4" ng-repeat="item in staff">{{item.FullName.length > 0 ? item.FullName + ": Rm " + item.RoomNumber : ""}}</div>
    </div>
</div>

Ce code aidera à aligner les éléments avec trois colonnes en mode lg et md, deux colonnes en mode sm et une colonne en mode xs

<div class="row">
<div ng-repeat="oneExt in configAddr.ext">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        {$index+1}}. 
        <input type="text" name="macAdr{{$index+1}}" 
       id="macAddress" ng-model="oneExt.newValue" value=""/>
    </div>
</div>