webentwicklung-frage-antwort-db.com.de

Horizontale ng-Wiederholung (er) mit neuen Zeilenumbrüchen

Gibt es in Verbindung mit Bootstrap und AngularJS eine Möglichkeit, ng-repeat horizontal mit einer neuen Zeile für jede festgelegte Anzahl von Elementen zu erstellen?

Ich habe mit ng-class herumgespielt, um dies zu erreichen Fiddle, aber das Problem ist, dass ich die float left divs nicht innerhalb der ersten Zeile div bekommen kann ... Irgendwelche Gedanken, denke ich nicht an etwas oder würde dies am besten mit einer Direktive gemacht werden?

Hier ist mein Code (Live-Beispiel im obigen Link):

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

Es war klug, was Sie mit ng-class gemacht haben. Ich hatte nie daran gedacht, %2 innerhalb des Ausdrucks dort zu verwenden. 

Zum späteren Nachschlagen gibt es einen etwas einfacheren Weg, dies zu erreichen: ng-class-even und ng-class-odd . Es tut das gleiche wie das, was Sie getan haben, aber nur ein bisschen sauberer:

<div ng-repeat="num in numbers" ng-class-even="'md-col-6'" ng-class-odd="'row'">
    {{num}}
</div>

Aber das löst Ihr Problem nicht. Wenn ich Sie richtig verstehe, möchten Sie eine Zeile mit zwei Spalten in dieser Zeile. Der einfachste Weg, den ich mir vorstellen kann, ist die Aufteilung der Arrays. Legen Sie die Wiederholung auf die div, dann haben Sie 2 span in der div. Ich denke, eines der Probleme, die Sie ursprünglich hatten, ist, dass Sie ein einzelnes div wiederholt haben und versucht haben, dieses block-Element als ein inline zu behandeln

Regler

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>

Fiddle

Da Sie Version 1.1.5 verwenden, öffnet sich auch eine neue Anweisung: ng-if ! Sie können auch ng-switch verwenden, um einige bedingte Logikanzeigen auszuführen.

Sie haben Bootstrap nicht in Ihre Geige aufgenommen, und aus irgendeinem Grund kann ich jsFiddle nicht dazu bringen, Bootstrap anzuzeigen. Also habe ich einige temporäre CSS-Klassen erstellt, die Bootstraps ähneln. class="span"

6
EnigmaRM

Wenn Sie mit Bootstrap 3 und AngularJS arbeiten, können Sie einen neuen Filter deklarieren, der ein Array von Subarray-Slices zurückgibt, und dann zwei Wiederholungsschritte ausführen.

Es wird so aussehen:

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

Sie finden ihn auf Plunker hier: http://plnkr.co/edit/rdyjRtZhzHjWiWDJ8FKJ?p=preview Aus irgendeinem Grund unterstützt die Ansicht in Plunker keine Bootstrap-3-Spalten, wenn Sie sie jedoch eingebettet öffnen Ansicht oder in Browsern können Sie sehen, dass es funktioniert. 

9
yshaool

Keine Notwendigkeit, .row-Klasse hinzuzufügen. Ich habe folgendes getan:

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

und es funktioniert wie ein Zauber.

3
Saud Alfadhli

Obwohl dies nicht die "richtige" Methode ist, gibt es eine Möglichkeit, dies mit CSS zu erreichen.

Dies ist zum Beispiel für ein 3-Spalten-Layout:

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

Ich habe zwei der hier vorgestellten Vorschläge ausprobiert ... Die von yshaool funktioniert zwar einwandfrei, aber wie ich es kommentierte, gib mir diesen unendlichen Schleifenfehler.

Dann habe ich so etwas ausprobiert:

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

und die Funktion:

$scope.split = function (index, length, attempts) {

       var ret = attempts.slice(index * length, (index * length) + length);
       console.log(JSON.stringify(ret));
       return ret;

}

irgendwohin mit, als ich merkte, dass es so einfach sein könnte wie 

<div ng-repeat="attempt in row.Attempts">
      <div class="col-md-4">
          <div>Attempt {{attempt.AttemptNumber}}</div>
          <div>{{attempt.Result}}</div>
     </div>                    
</div>

using "col-md-4" macht den Trick, da ich nur drei Spalten pro Zeile aufspalten muss ... (. Bootstrap erledigt die Arbeit!) Die anderen Antworten hier waren wirklich nützlich ...

2
Kcats Wolfrevo

Erstellen Sie abhängig von der Anzahl der Spalten, die Sie in Ihrer Vorlage benötigen, Blöcke der ursprünglichen Datenquelle in Ihrem Controller.

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

In Ihrer Vorlage können Sie nun Folgendes tun

<div class="row" ng-repeat="categories in chunkedCategories">
 <div class="col-xs-4" ng-repeat="category in categories">
  <h2>{{category.title}}</h2>
 </div>         
</div>  
1
Suresh Bala

Mein Ansatz war die Verwendung der $ index-Variablen, die von AngularJS innerhalb einer ng-repeat-Direktive erstellt und aktualisiert wird, um einen Aufruf des CSS-Clearfix-Hacks auszulösen, der wiederum in eine neue Zeile zurückgesetzt wird. 

Ich verwende folgende Versionen: AngularJS 1.5.5 und 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>
1
Marshee

Um den Bootstrap der Lösung auf dem neuesten Stand zu halten, habe ich dies mit ng-class gelöst

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>
0
Josip