2014-09-05 22 views
5

Mam więc listę, którą wracam z usługi odpoczynkowej. Teraz chcę wyświetlić ten obiekt w formacie kolumnowym, a teraz w pierwszym rzędzie. Więc byłoby coś takiego:ng-powtórzenie na kolumnie tabeli

firstName: Bob    Alice 
LastName: Doe    Joe 
EmailId:  [email protected]  [email protected] 
ContactNo: 123123   12444 

więc jak mogę używać NG-powtórzyć tutaj:

<tr> 
    <th>firstName:</th> 
    <td>('Name should be displayed here')</td> 
    </tr> 

Odpowiedz

14

Można użyć NG-repeat na elemencie TD.

<tr> 
    <th>firstName:</th> 
    <td ng-repeat="person in people">{{person.firstName}}</td> 
</tr> 
<tr> 
    <td ng-repeat="person in people">{{person.lastName}}</td> 
</tr> 
+0

Wielkie dzięki za to. Jestem nowy w bootstrapie i kanciastym. Więc było mi trochę trudniej. Ale powyższa sprawa zadziałała. Wielkie dzięki. – Akshay

1

Jeśli zadeklarujesz klucze obiektów jesteś iteracja, można zagnieździć Twój ng-repeats tak, że nie trzeba zadeklarować każdy wiersz w kółko. Wykonaj następujące czynności i gniazdo im zamiast:

w kątowym App:

/*for the data*/ 
var personKeys = ['firstName', 'LastName', 'EmailID', 'ContactNo']; 

var people = [ 
    { 
    firstName: 'Bob', 
    LastName: 'Doe', 
    EmailID: '[email protected]', 
    ContactNo: 123123 
    }, 
    /* etc */ 
]; 

/*don't forget to reference this in your controller with something like: */ 
this.pKeys = personKeys; 
this.people = people; 

w HTML:

<table ng-controller='MyController as personList'> 
    <tr ng-repeat='key in personList.pKeys'> 
     <th>{{key}}</th> 
     <td ng-repeat='person in personList.people'> 
      {{person[key]}} 
     </td> 
    </tr> 
</table> 

ten nadal ma problem iteracji po każdej osoby | Atrybuty | razy, zamiast tylko raz. Jestem pewien, że istnieje sprytny sposób na powtarzanie tylko raz, pamiętanie i przygotowywanie tabeli bez konieczności przechodzenia przez cały zestaw danych wiele razy, aby środowisko wykonawcze nie rosło tak szybko, jak rozszerzysz swoje dane.

Powiązane problemy