Angular ng-repeat auf dynamische numerischen Tasten nicht

arbeiten

Ich versuche, eine Schleife über auf unter Daten [{"5+":[2,1,3]},{"3-5":[0,1,0]},{"1-3":[1,0,3]},{"0.5":[0,0,0]},{"<30":[0,0,0]}] Angular ng-repeat auf dynamische numerischen Tasten nicht

unter Code Stück mit

<tr ng-repeat='sessionLength in [{"5+":[2,1,3]},{"3-5":[0,1,0]},{"1-3":[1,0,3]},{"0.5":[0,0,0]},{"<30":[0,0,0]}]'> 
              <td ng-repeat="(key, value) in sessionLength"> 
               {{key}} 
              </td> 
              <td ng-repeat="(k,v) in sessionLength['5+']" ng-if="sessionLength['5+']"> 
              {{v}} 
              </td> 
              <td ng-repeat="(k,v) in sessionLength['3-5']" ng-if="sessionLength['3-5']"> 
              {{v}} 
              </td> 
              <td ng-repeat="(k,v) in sessionLength['1-3']" ng-if="sessionLength['1-3']"> 
              {{v}} 
              </td> 
              <td ng-repeat="(k,v) in sessionLength['0.5']" ng-if="sessionLength['5']"> 
              {{v}} 
              </td> 
              <td ng-repeat="(k,v) in sessionLength['<30']" ng-if="sessionLength['<30']"> 
              {{v}} 
              </td> 
             </tr>

Und unten ist, was ich als Ausgang will

 App1 App2 App3 
5+ : 2 1 3 
3-5 : 0 1 0 
1-3 : 1 0 3 
0.5 : 0 0 0 
<30 : 0 0 0

Brauchen Sie Hilfe mit obigen Schleifen. Ich bekomme nicht wie oben erwähnt erwartetes Ergebnis.

Quelle

2016-09-21 Aman Kumar Aggarwal

Sie könnten drei haben ng-repeat eins für tbody dann tr & td, aber für größere Sammlung würde dieser Ansatz Leistung machen.

In diesem Fall sollten Sie einen benutzerdefinierten Filter erstellen, der formatierte Daten zurückgibt, die Sie ng-repeat reduzieren.

Markup

<thead> 
    <th></th> 
    <th>App1</th> 
    <th>App2</th> 
    <th>App3</th> 
</thead> 
<tbody ng-repeat="(sessionKey, session) in sessionLength"> 
    <tr ng-repeat="(key, value) in session track by $index"> 
     <td>{{key}} :</td> 
     <td ng-repeat="v in value"> {{ v}}</td> 
    </tr> 
</tbody>

Quelle

2016-09-21 10:06:53

die Haupt tr Schleife durch diese Datenarray [{ "5 +": [2,1,3]}, { "3-5": [0,1,0]}, { "1 -3 ": [1,0,3]}, {" 0,5 ": [0,0,0]}, {" <30 ": [0,0,0]}] und das Array sessionLength enthält das Objekt mit ihr jeweiliger Schlüssel, so dass Ihr Stück Code bei dieser Struktur nicht funktioniert –

Thnx für die Hilfe von mir. Aber die aktualisierte Lösung funktioniert nicht. –

@AmanKumarAggarwal versuchen Sie es jetzt, sollte funktionieren .. –

Sie haben doppelte Werte in den sessionLength Arrays, so dass Sie track by $index verwenden müssen Fehler "sind nicht erlaubt Dubletten in einem Repeater", um eine zu vermeiden. Dies sollte funktionieren ...

 <tr ng-repeat='sessionLength in [{"5+":[2,1,3]},{"3-5":[0,1,0]},{"1-3":[1,0,3]},{"0.5":[0,0,0]},{"<30":[0,0,0]}]'> 
       <td ng-repeat="(key, value) in sessionLength"> 
        {{key}} 
       </td> 
       <td ng-repeat="(k,v) in sessionLength['5+'] track by $index" ng-if="sessionLength['5+']"> 
        {{v}} 
       </td> 
       <td ng-repeat="(k,v) in sessionLength['3-5'] track by $index" ng-if="sessionLength['3-5']"> 
        {{v}} 
       </td> 
       <td ng-repeat="(k,v) in sessionLength['1-3'] track by $index" ng-if="sessionLength['1-3']"> 
        {{v}} 
       </td> 
       <td ng-repeat="(k,v) in sessionLength['0.5'] track by $index" ng-if="sessionLength['0.5']"> 
        {{v}} 
       </td> 
       <td ng-repeat="(k,v) in sessionLength['<30'] track by $index" ng-if="sessionLength['<30']"> 
        {{v}} 
       </td> 
      </tr>

Quelle

2016-09-21 10:16:01 JayChase

Das funktioniert für mich. Aber ist ihre andere sauberere Art, dasselbe zu tun. –

@Pankaj Parkar Unten ist, was ich am Ende verwendet habe. Das funktioniert gut.

<tbody ng-repeat="(sessionKey, session) in compAppsData"> 
             <tr ng-repeat="(key, value) in session track by $index"> 
              <td>{{key}}</td> 
              <td ng-repeat="v in value track by $index" style="text-align:center"> {{ v}}</td> 
             </tr> 
            </tbody>

Quelle

2016-09-21 12:20:07

Antwort

Verwandte Themen