AngularJS ng-repeat für Zeilen und Artikel

Question

Ich habe Ionic App. Jetzt habe ich unter dem Code.

Aber es ist auf Android 4.0.0 gebrochen und ich brauche Wiederholungszeilen und 3 Elemente in der Zeile. Ich brauche so etwas.

<div class="row" ng-repeat="(key, value) in categoryMenuOut"> 
    <div class="col col-33"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
    <div class="col col-33"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
    <div class="col col-33"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
</div> 

Ich brauche Schlüssel und Wert in der ng-Wiederholung. Ich habe keine Lösung für mich gefunden. Können Sie mir bitte helfen.

Update: Wenn ich eine Zeile verwenden, werden die Elemente auf dem Android 4.0.0 nicht auf eine neue Zeile übertragen. Ich brauche Wiederholungsreihen und in den Reihen muss ich 3 verschiedene Gegenstände sehen. Ich habe versucht Angular ng-repeat add bootstrap row every 3 or 4 cols diese Lösung, aber ich habe (Schlüssel, Wert) und es passt mir nicht.

Answer 1

Verwenden Sie vielleicht collection-repeat mit Ion-Liste?

Answer 2

Dies scheint gültig, aber vielleicht wollen Sie so etwas wie dies zu tun:

angular.module('myApp',[]) 
 
.controller('myCtrl',['$scope',function($scope){ 
 
    $scope.categoryMenuOut = {"Ben": {"name": "bill"}, "Nate": {"name": "joll"}, "Austin": {"name": "boll"}}; 
 

 
}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div ng-app='myApp'> 
 
    <div ng-controller='myCtrl'> 
 
    <div class="row" ng-repeat="(key, value) in categoryMenuOut track by $index"> 
 
     
 
\t <div class="col col-33"> 
 
     <h3>Key: {{key}}</h3> 
 
     <h4>Value: {{value.name}} 
 
    </div> 
 

 
     \t <div class="col col-33"> 
 
     <h3>Key: {{key}}</h3> 
 
     <h4>Value: {{value.name}} 
 
    </div> 
 
    
 
    <div class="col col-33"> 
 
     <h3>Key: {{key}}</h3> 
 
     <h4>Value: {{value.name}} 
 
    </div> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Ihre Frage nicht klar genug ist, aber ich werde versuchen, sie zu beantworten.

Zunächst einmal sollten Sie nicht href mit einer Winkel Vorlage Zeichenfolge verwenden, weil es eine Chance ist der Link zu einer nicht vorhandenen Seite hinweisen würde (vor der verdauen Schleife abgeschlossen). Verwenden Sie stattdessen ng-href.

Quelle: https://docs.angularjs.org/api/ng/directive/ngHref

Wenn ich dein Problem richtig verstanden, können Sie nicht alle Ihre Werte im Objekt zugreifen ng-repeat, ist dies, weil Sie wahrscheinlich Ihr JS-Objekt nicht richtig strukturiert.

Zum Beispiel (name, age) in {'adam':10, 'amalie':12}, würde dazu führen, dass der Name zuerst adam und dann amaile, das gleiche gilt für das Alter.

Damit Ihr (key, value) richtig zu arbeiten, Ihre categoryMenuOut sollte eine ähnliche Struktur wie haben:

$scope.categoryMenuOut = { 
    pizza1: { 
     name: 'Pepperoni' 
    } 
} 

oder noch besser:

$scope.categoryMenuOut = [ 
    { 
     name: 'Pepperoni' 
    }, 
    { 
     name: 'Salad' 
    } 
] 

In meinem ersten Beispiel Ihr Schlüssel pizza1 sein würde, Die value wird das gesamte Objekt { name: 'Pepperoni' } sein, daher wird die value.name gleich Pepperoni sein. In diesem Fall haben Sie die volle Kontrolle über den Namen des Schlüssels. Wenn Sie es wie im zweiten Beispiel tun, wären Ihre Schlüssel 0, 1...

Versuchen Sie, Ihre Frage beim nächsten Mal neu zu formulieren, damit wir sie verstehen und eine richtige Antwort erhalten.