wie man die ng-repeat-Daten mit Bootstrap in drei Spalten aufteilt

Ich verwende ng-repeat mit meinem Code. Ich habe 'n' Anzahl von Textfeldern basierend auf ng-repeat. Ich möchte das Textfeld an drei Spalten ausrichten.

Das ist mein 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>

Der zuverlässigste und technisch korrekteste Ansatz besteht darin, die Daten in der Steuerung zu transformieren. Hier ist eine einfache Chunk-Funktion und Verwendung.

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

Dann würde Ihre Ansicht folgendermaßen aussehen:

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

Wenn Sie Eingaben innerhalb von haben ng-repeat, möchten Sie wahrscheinlich die Arrays aufheben / wieder verbinden, wenn die Daten geändert werden oder wenn sie gesendet werden. So würde dies in a aussehen $watch, sodass die Daten immer im ursprünglichen, zusammengeführten Format verfügbar sind:

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

Viele Menschen bevorzugen es, dies in der Ansicht mit einem Filter zu erreichen. Dies ist möglich, sollte aber nur zu Anzeigezwecken verwendet werden! Wenn Sie Eingaben in dieser gefilterten Ansicht hinzufügen, wird es Probleme verursachen, kann gelöst werden, aber sind nicht hübsch oder zuverlässig .

Das Problem mit diesem Filter ist, dass er jedes Mal neue verschachtelte Arrays zurückgibt. Angular beobachtet den Rückgabewert vom Filter. Wenn der Filter zum ersten Mal ausgeführt wird, kennt Angular den Wert und führt ihn dann erneut aus, um sicherzustellen, dass die Änderung abgeschlossen ist. Wenn beide Werte gleich sind, wird der Zyklus beendet. Wenn nicht, wird der Filter immer wieder ausgelöst, bis sie gleich sind, oder Angular erkennt, dass eine unendliche Digest-Schleife auftritt, und fährt herunter. Da neue verschachtelte Arrays / Objekte zuvor nicht von Angular verfolgt wurden, unterscheidet sich der Rückgabewert immer vom vorherigen. Um diese "instabilen" Filter zu beheben, müssen Sie den Filter in eine memoizeFunktion einschließen. lodashhat eine memoizeFunktion und die neueste Version von lodash enthält auch eine chunkFunktion, so dass wir diesen Filter sehr einfach mit erstellen könnennpmModule und Kompilieren des Skripts mit browserifyoder webpack.

Denken Sie daran: Nur anzeigen! Filtern Sie im Controller, wenn Sie Eingänge verwenden!

Installiere lodash:

npm install lodash-node

Erstellen Sie den Filter:

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

Und hier ist ein Beispiel mit diesem Filter:

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

Artikel vertikal bestellen

1  4
2  5
3  6

In Bezug auf vertikale Spalten (Liste von oben nach unten) und nicht horizontal (von links nach rechts) hängt die genaue Implementierung von der gewünschten Semantik ab. Listen, die sich ungleichmäßig aufteilen, können auf verschiedene Arten verteilt werden. Hier ist eine Möglichkeit:

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

Der direkteste und einfachste Weg, um Spalten abzurufen, ist die Verwendung von CSS-Spalten :

.columns {
  columns: 3;
}

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

Diese Lösung ist sehr einfach:

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

Eine saubere, anpassungsfähige Lösung, die keine Datenmanipulation erfordert :

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

Das CSS:

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

Das JavaScript:

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

Dies ist eine einfache Lösung zum dynamischen Rendern von Daten in Zeilen und Spalten, ohne dass das Datenarray, das Sie anzeigen möchten, bearbeitet werden muss. Wenn Sie versuchen, die Größe des Browserfensters zu ändern, wird das Raster dynamisch an die Größe des Bildschirms / Div angepasst.

(Ich habe Ihrer ID auch ein Suffix {{$ index}} hinzugefügt, da ng-repeat versucht, mehrere Elemente mit derselben ID zu erstellen, wenn Sie dies nicht tun.)

Ein ähnliches Arbeitsbeispiel

Die Antwort von m59 ist ziemlich gut. Das einzige, was ich daran nicht mag, ist, dass es divs für möglicherweise Daten für eine Tabelle verwendet.

In Verbindung mit dem Filter von m59 (Antwort irgendwo oben) erfahren Sie hier, wie Sie ihn in einer Tabelle anzeigen.

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

Das Folgende ist einfacher:

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

Die Antwort von Cumulo Nimbus ist nützlich für mich, aber ich möchte, dass dieses Raster von einem Div umschlossen wird, das die Bildlaufleiste anzeigen kann, wenn die Liste zu lang ist.

Um dies zu erreichen, habe ich style="height:200px; overflow:auto"ein Div um die Tabelle hinzugefügt , wodurch es als einzelne Spalte angezeigt wird.

Funktioniert jetzt für eine Array-Länge von eins.

Ich habe eine Funktion und habe sie in einem Dienst gespeichert, damit ich sie in meiner gesamten App verwenden kann:

Bedienung:

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

});

Regler:

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

Markup:

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

Mein Ansatz war eine Mischung aus Dingen.

Mein Ziel war es, ein Raster zu haben, das sich an die Bildschirmgröße anpasst. Ich wollte 3 Spalten für lg, 2 Spalten für smund mdund 1 Spalte für xs.

Zuerst habe ich die folgende Bereichsfunktion mithilfe des Winkelservices erstellt $window:

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

Dann habe ich die von @Cumulo Nimbus vorgeschlagene Klasse verwendet:

.new-row {
    clear: left;
}

In dem div, das das enthält ng-repeat, habe ich die resizableDirektive hinzugefügt , wie auf dieser Seite erläutert , damit bei jeder Größenänderung des Fensters der Winkeldienst $windowmit den neuen Werten aktualisiert wird.

Letztendlich habe ich in der wiederholten Div:

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

Bitte lassen Sie mich alle Mängel in diesem Ansatz wissen.

Hoffe es kann hilfreich sein.

Ein einfacher Trick mit "Clearfix" -CSS, der von Bootstrap empfohlen wird:

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

Viele Vorteile: Effizient, schnell, mit Boostrap-Empfehlungen, Vermeidung möglicher $ Digest-Probleme und ohne Änderung des Angular-Modells.

In diesem Beispiel wird ein verschachtelter Repeater erstellt, bei dem die äußeren Daten ein inneres Array enthalten, das ich in zwei Spalten auflisten wollte. Das Konzept würde für drei oder mehr Spalten gelten.

In der inneren Spalte wiederhole ich die "Zeile" bis das Limit erreicht ist. Die Grenze wird bestimmt, indem die Länge des Arrays von Elementen durch die Anzahl der gewünschten Spalten dividiert wird, in diesem Fall durch zwei. Die Divisionsmethode befindet sich auf dem Controller und übergibt die aktuelle Array-Länge als Parameter. Die JavaScript-Slice-Funktion (0, array.length / columnCount) hat dann das Limit auf den Repeater angewendet.

Der zweite Spaltenwiederholer wird dann aufgerufen und wiederholt das Slice (array.length / columnCount, array.length), das die zweite Hälfte des Arrays in Spalte zwei erzeugt.

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

Ich hoffe, dies hilft, die Lösung auf eine andere Weise zu betrachten. (PS das ist mein erster Beitrag hier! :-))

Ich repariere ohne .row

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

und css

.left {
  float: left;
}

Hier ist eine einfache Möglichkeit, dies zu tun. Es ist mehr manuell und endet mit unordentlichem Markup. Ich empfehle dies nicht, aber es gibt Situationen, in denen dies nützlich sein könnte.

Hier ist ein Geigenlink 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"},
        ...
    ];
});

Für dieses Setup müssen wir etwas Mathematik für das Markup verwenden: /, daher müssen Sie Mathematik einfügen, indem Sie diese Zeile hinzufügen: $scope.Math = Math;

Alle diese Antworten scheinen massiv überarbeitet zu sein.

Die bei weitem einfachste Methode wäre, die Eingabedivs in einem col-md-4-Spalten-Bootstrap einzurichten. Bootstrap formatiert sie dann aufgrund der 12-Spalten-Natur des Bootstraps automatisch in 3 Spalten:

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

Basierend auf der sehr guten Antwort von m59. Ich habe festgestellt, dass Modelleingaben unscharf werden, wenn sie sich ändern, sodass Sie jeweils nur ein Zeichen ändern können. Dies ist eine neue Liste von Objekten für alle, die sie benötigen:

BEARBEITEN Aktualisiert, um mehrere Filter auf einer Seite zu verarbeiten

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

Und das wäre die Verwendung:

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

Ich bin neu in Bootstrap und AngularJs, aber dies könnte auch Array pro 4 Elemente als eine Gruppe machen, das Ergebnis wird fast 3 Spalten mögen. Dieser Trick verwendet das Bootstrap-Break-Line-Prinzip.

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

In Lodash ist jetzt eine Chunk-Methode integriert, die ich persönlich verwende: https://lodash.com/docs#chunk

Auf dieser Grundlage könnte der Controller-Code wie folgt aussehen:

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

Code anzeigen:

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

Ein anderer Weg ist width:33.33%; float:leftein Wrapper-Div wie folgt :

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

Ich befand mich in einem ähnlichen Fall und wollte Anzeigegruppen mit jeweils 3 Spalten generieren. Obwohl ich Bootstrap verwendet habe, habe ich versucht, diese Gruppen in verschiedene übergeordnete Divs zu unterteilen. Ich wollte auch etwas allgemein Nützliches machen.

Ich näherte mich mit 2 ng-repeatwie folgt:

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

Dies macht es sehr einfach, zu einer anderen Anzahl von Spalten zu wechseln und in mehrere übergeordnete Divs aufzuteilen.

Nur für den Fall, dass jemand ein Angular 7 (und eine höhere Version) möchte, ist hier ein Beispiel, das ich in einer meiner Anwendungen verwendet habe:

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>

.TS DATEI

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

Dies ist eine großartige Lösung zum dynamischen Erstellen neuer Spalten / Zeilen, je nachdem, wie viele Elemente Sie aus der Datenbank iterieren. Vielen Dank!

Dies beantwortet die ursprüngliche Frage, wie man 1,2,3 in einer Spalte erhält. - gefragt von Kupu 8. Februar 14 um 13:47 Uhr

anglejs code:

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

Code anzeigen (Hinweis: Verwenden von 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>

Dieser Code hilft dabei, die Elemente mit drei Spalten im lg- und md-Modus, zwei Spalten im sm-Modus und einer einzelnen Spalte im xs-Modus auszurichten

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