2013-03-14 3 views
58

Я использую AngularJS, и эффект, который я хочу получить, будет чем-то подобным тому, что это произведет, если он будет работать (а это не так)., используя ng-repeat и ng-класс для строк внутри таблицы

Посмотреть

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

Контроллер

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

Я понимаю, что этот код не будет работать, потому что person недоступен для ng-class, как он будет доступен только для объектов внутри каждой строки. Код должен получить представление о том, что я пытаюсь сделать: ie. Я хочу иметь таблицы строк, которые создаются с использованием ng-repeat, чей класс также основан на условии, которое зависит от доступа к облачной функции самой строки, например. person. Я понимаю, что может просто добавить ng-класс в столбцы, но это скучно. У кого-нибудь есть лучшие идеи?

+0

возможно дубликат [Как я условно применить стили CSS в AngularJS?] (Http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in- angularjs) –

ответ

64

Это фактически должны работать нормально. Человек должен быть доступен как на элементе tr, так и на его дочерних элементах, поскольку они имеют один и тот же объем.

Это, кажется, работает хорошо для меня:

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

http://jsfiddle.net/xEyJZ/

+4

Hmph, так и есть. Интересно, какого черта я делаю тогда .... Спасибо – oeoeaio

8

На самом деле, вы можете использовать «человек» в контексте, о котором вы говорите. Он существует на повторяющемся элементе, а также на любых элементах внутри него. Причина в том, что любые директивы для определенного элемента имеют один и тот же объект $ scope. ng-repeat имеет приоритет 1000, поэтому он уже создал свой $ scope и помещает в него «person», поэтому «человек» доступен для ng-класса.

Смотреть это Plnkr:

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6

0

Обычно я хотел бы дать более полный ответ, но есть слишком много кода вовлечены в этот бит, чтобы сделать это. Так что просто покажу, что самое главное, и надеюсь, что кто-то, кто смотрит на это, знает, как это использовать. Мой динамический массив JSON имеет в себе как столбцы, так и строки, но главное, что имеет значение для этого бита, - ng-show = "$ last". Это должно показывать только последнюю строку в динамическом массиве JSON.

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