Próbuję zbudować tabelę z dynamiczną liczbą kolumn i chciałbym użyć tych nagłówków kolumn, aby następnie zdecydować, które atrybuty obiektu do wyświetlenia. Poniżej jest to, co chciałbym zrobić, jednak rzuca błąd analizy. Jakieś pomysły?

<table class="table">

    <thead>
        <th ng-repeat="th in tableHeaders">{{th}}</th>
    </thead>

    <tr ng-repeat="item in items | filter:query | orderBy:orderProp">
        <td>{{item.{{th}}}}</td>
    </tr>

</table>

TH Array

['column1', 'column2']

tablica elementów

[
    {column1:blah, column2:blah},
    {column1:blah2, column2:blah2}
]

Aktualizacja 1 Próbowałem użyć następujących i dostaję kilka pustych wierszy.

<tr ng-repeat="item in items | filter:query | orderBy:orderProp">
<td ng-repeat="th in tableHeaders">{{item.$eval(th)}}</td>
</tr>
0
zmanc 21 listopad 2013, 22:51

2 odpowiedzi

Najlepsza odpowiedź

Przykład za pomocą definicji kolumny z nagłówków. skrzypce

<table class="table">
    <thead>
        <th ng-repeat="th in tableHeaders">{{th}}</th>
    </thead>
    <tr ng-repeat="item in items">
        <td ng-repeat="col in tableHeaders">{{item[col]}}</td>
    </tr>
</table>

Jeśli kolumna w Tableheaders jest obiektem, możesz również zrobić Col.Property. Fiddle

1
TrevDev 21 listopad 2013, 20:23

Gdy inni wskazywały w komentarzach, ng-repeat tworzy swój własny zakres dziecka. Więc próbując odwoływać się do th później w tabeli nie jest możliwe, chyba że był to rodzic.

Więc czego potrzebujesz, jest dodatkowym ng-repeat. na twoim rzeczywistym elemencie td. Jeden powtórzenie zajmie się <tr>, a druga pętla nad liczbą obiektów w każdym z tych wierszy.

Sprawdź tę skrzypce na przykład

<table class="table">

    <thead>
        <th ng-repeat="th in tableHeaders">{{th}}</th>
    </thead>

    <tr ng-repeat="item in items">
        <td ng-repeat="col in item">{{col}}</td>
    </tr>

</table>
0
EnigmaRM 21 listopad 2013, 19:25