AngularJS: Tabelle mit ng-Wiederholung in Zeile/Spalte der Tabelle

Question

Ich muss eine Tabelle aus einem Array von Objekten erstellen, aber ich möchte die Tabelle nicht fest codieren. Ich kann zum Beispiel this oder this nicht tun. Ich brauche eher verschachtelte ng-Wiederholungen wie this. Aber mein Fall ist ein bisschen anders, weil ich Spalten habe, die zwei Werte in einem Array enthalten. Die Daten sieht wie folgt aus:

[ 
    { 
     "foo":"bar",..., 
     "key1":[ 
     "value1", 
     "value2" 
     ], 
     "key2":[ 
     "value1", 
     "value2" 
     ],..., 
     "more_foo":"more_bar" 
    },... 
] 

ich die Werte wollen (die immer Strings) aller Objekte (die immer eine gleiche Struktur haben) aus dem Array in den Tabellenzeilen, wobei jeder Schlüssel sollte der Spaltenname sein. Wie folgt aus:

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    border-spacing: 0; 
 
} 
 

 
td, 
 
th { 
 
    padding: 0.5em; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>foo</th> 
 
     <th colspan="2">key1</th> 
 
     <th colspan="2">key2</th> 
 
     <th>more_foo</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>bar</td> 
 
     <td>value1</td> 
 
     <td>value2</td> 
 
     <td>value1</td> 
 
     <td>value2</td> 
 
     <td>more_bar</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Hier ist das, was ich gekommen bin, oben mit:

<table> 
    <thead> 
    <tr> 
     <th ng-repeat="(propName, prop) in myArray[0]" 
      colspan="{{isUpdateable(propName) ? 2 : undefined}}"> {{propName}} 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="object in myArray | filter: searchFilter"> 
     <td ng-repeat="(propName, prop) in object" double-col>{{prop}}</td> 
    </tr> 
    </tbody> 
</table> 

isUpdatable(propName) gibt true zurück, wenn dieser Wert ist ein Array und falsch, wenn dies nicht der Fall. Dies wird es möglich machen, zwei td s in dieser Spalte zu haben.

Die Doppel-col-Richtlinie:

app.directive('double-col', function() { 
    return { 
     transclude: true, 
     template: "<td>{{prop[0]}}</td><td class=\"changedProp\">{{prop[1]}}</td>" 
    }; 
}); 

ich diese Richtlinie soll die bestehenden td mit zwei td s ersetzen, wenn und nur wenn prop ein Array und sonst nichts tun prop anzuzeigen (siehe td oben) .

Da Sie auf https://stackoverflow.com sind (der Ort, wo Leute Dinge posten, die noch nicht gut funktionieren), können Sie wahrscheinlich vermuten, dass mein aktueller Code nicht wirklich gut funktioniert. Ich bin auch neu bei angularJS und habe im Grunde kein Verständnis für benutzerdefinierte Direktiven (und wahrscheinlich auch für die meisten anderen Sachen), also wäre es schön, wenn mir jemand mit diesem Problem helfen und eine Erklärung liefern könnte.

Answer 1

Was

<tr ng-repeat="object in myArray | filter: searchFilter"> 
     <td ng-repeat="(propName, prop) in object" colspan="{{isArray(prop) ? prop.length : 1}}"> 
     <span ng-if="!isArray(prop)"> {{prop}}</span> 
     <table ng-if="isArray(prop)"><tr> 
    <td ng-repeat="prop1 in prop"> 
     {{prop1}} 
    </td> 
    </tr></table> 
     </td> 

    </tr> 

$scope.isArray=function(prop){ 
return Array.isArray(prop); 
} 

Here is working fiddle