在表格内的行上使用ng-repeat和ng-class

oeo*_*aio 59 angularjs angularjs-ng-repeat

我正在使用AngularJS,我希望得到的效果类似于它会产生的效果,假设它可以工作(它没有).

视图

<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>
Run Code Online (Sandbox Code Playgroud)

调节器

$scope.rowClass = function(person){
  ...return some value based upon some property of person...
}
Run Code Online (Sandbox Code Playgroud)

我知道这个代码将无法工作,因为person是不可用的ng-class,因为这将只提供给每一行中的对象.代码是为了了解我正在尝试做的事情:即.我希望能够创建使用ng-repeat其类也基于条件的表行,该条件依赖于对行本身的作用域特征的访问,例如.person.我意识到我可以在列上添加ng-class,但这很无聊.有没有更好的想法?

jnc*_*ton 66

这实际上应该工作正常.人员应该在tr元素及其子元素上可用,因为它们共享相同的范围.

这对我来说似乎很好:

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

http://jsfiddle.net/xEyJZ/


Jas*_*den 8

实际上,您可以在所指的上下文中使用"person".它存在于重复的项目以及其中的任何项目中.原因是特定元素上的任何指令共享相同的$ scope对象.ng-repeat的优先级为1000,因此它已经创建了$ scope并将"person"放入其中,因此"person"可用于ng-class.

看到这个Plnkr:

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6