2013-03-14 4 views
58

Ich benutze AngularJS und der Effekt, den ich bekommen möchte, wäre etwas ähnlich zu dem, was dies würde, vorausgesetzt, es würde funktionieren (was es nicht tut).mit ng-repeat und ng-Klasse in Zeilen innerhalb einer Tabelle

Ansicht

<tr ng-repeat='person in people' ng-class='rowClass(person)'> 
    <td>.....info about person...</td> 
    <td>.....info about person...</td> 
    <td>.....info about person...</td> 
</tr> 

-Controller

$scope.rowClass = function(person){ 
    ...return some value based upon some property of person... 
} 

Ich stelle fest, dass dieser Code funktioniert nicht, weil person zu ng-class nicht verfügbar ist, da es nur auf Objekte innerhalb jeder Zeile zur Verfügung stehen wird. Der Code ist, um die Idee von dem zu bekommen, was ich versuche zu tun: ie. Ich möchte in der Lage sein, Tabellenzeilen zu haben, die mit ng-repeat erstellt werden, deren Klasse ebenfalls auf einer Bedingung basiert, die vom Zugriff auf das Bereichsmerkmal der Zeile selbst abhängt, z. person. Ich realisiere, dass ich könnte nur hinzufügen, ng-Klasse auf den Spalten, aber das ist langweilig. Hat jemand bessere Ideen?

+0

möglich Duplikat [Wie bedingt CSS-Stile in AngularJS bewerbe ich mich?] (Http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in- angularjs) –

Antwort

64

Dies sollte in Ordnung tatsächlich funktionieren. Die Person sollte sowohl auf dem tr-Element als auch auf ihren Kindern verfügbar sein, da sie denselben Umfang haben.

Dies scheint mir gut zu funktionieren:

<table> 
    <tr ng-repeat="person in people" ng-class="rowClass(person)"> 
     <td>{{ person.name }}</td> 
    </tr> 
</table> 

http://jsfiddle.net/xEyJZ/

+4

Hmpf, so ist es. Ich frage mich was zur Hölle ich dann mache .... Danke – oeoeaio

8

Eigentlich können Sie verwenden "Person" in dem Kontext, den Sie beziehen sich auf. Es existiert auf dem Gegenstand, der wiederholt wird, sowie auf allen darin enthaltenen Gegenständen. Der Grund dafür ist, dass alle Direktiven für ein bestimmtes Element dasselbe $ scope-Objekt verwenden. ng-repeat hat eine Priorität von 1000, also hat es bereits seinen $ scope erstellt und "person" in es eingefügt, daher steht "person" für ng-class zur Verfügung.

Sehen Sie diese Plnkr:

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6

0

Normalerweise dass Ich mag eine umfassendere Antwort geben, aber es gibt zu viel Code in diesem Bit beteiligt zu tun. So wird nur zeigen, was am wichtigsten ist und hoffen, dass jeder, der dies anschaut, weiß, wie man es benutzt. Mein dynamisches JSON-Array enthält sowohl Spalten als auch Zeilen, aber die Hauptsache, die für dieses Bit wichtig ist, ist ng-show = "$ last". Dies sollte nur die letzte Zeile im dynamischen JSON-Array anzeigen.

<tr ng-repeat="row in table.rows" ng-show="$last"> 

    <td ng-repeat="column in table.cols" ng-show="column.visible == true" nowrap >{{row[column.columnname]}}</td> 
</tr>