2013-03-14 17 views
58

AngularJS kullanıyorum ve elde etmek istediğim etki, bunun işe yaradığı varsayılarak üretileceği varsayımına benzer bir şey olurdu (ki öyle değil).ng-yineleme ve ng-sınıfını bir tablo içindeki satırlarda kullanarak

Görünüm

<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> 

Kontrolör

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

Ben sadece her satır içi nesneler sunulacak şekilde personng-class için kullanılamaz durumda olduğundan bu kod çalışmaz farkındayız. Kod, karşısında yapmaya çalıştığım şeyin fikrini elde etmektir: örn. Sınıfı, örneğin, satırın kendisinin genişletilmiş özelliğine erişime bağlı bir koşula dayandırılan ng-repeat kullanılarak oluşturulan tablo satırlarına sahip olmak istiyorum. person. Ben 'un sadece sütunlara ng sınıfı ekleyebileceğinin farkındayım ama bu sıkıcı. Daha iyi bir fikri olan var mı?

+0

olası yinelenen [I koşullu angularjs CSS stillerini nasıl başvurabilirim?] (Http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in- angularjs) –

cevap

64

Bu aslında iyi çalışması gerekir. Aynı kapsamı paylaştıkları için kişi hem çocuk hem de çocuk üzerinde bulunmalıdır.

Bu benim için çok iyi çalışıyor görünüyor:

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

http://jsfiddle.net/xEyJZ/

+4

Hmph, yani öyle. Ne yapıyorum merak ediyorum o zaman .... Teşekkürler – oeoeaio

8

Aslında, , atıfta bulunduğunuz bağlamda "kişi" yi kullanabilir. İçerisindeki herhangi bir öğenin yanı sıra tekrarlanan öğede var. Bunun nedeni, belirli bir öğedeki yönergelerin aynı $ kapsam nesnesini paylaşmasıdır. ng-repeat 1000 Önceliğine sahiptir, bu yüzden zaten $ kapsamını yaratmış ve içine "kişi" koymuştur, bu nedenle "kişi" ng-class için kullanılabilir.

bu Plnkr bakınız:

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6

0

Normalde daha kapsamlı cevap vermem gerekir ama bunu yapmak için bu bit katılan çok fazla kod var. Bu yüzden en önemli olanı gösterecek ve buna bakan herkesin bunu nasıl kullandığını umuyoruz. Dinamik JSON dizilimimde hem sütunlar hem de satırlar var, ancak bu bit için önemli olan şey ng-show = "$ last". Bu sadece dinamik JSON dizisindeki son satırı göstermelidir.

<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> 
ait
İlgili konular