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

Posted 2023-03-06

【中文标题】在表内的行上使用 ng-repeat 和 ng-class

【英文标题】：Using ng-repeat and ng-class on rows inside a table

【发布时间】：2013-03-02 21:12:13

【问题描述】：

我正在使用 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>

控制器

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

我意识到这段代码不起作用，因为person 对ng-class 不可用，因为它只对每行内的对象可用。代码是为了了解我想要做的事情：即。我希望能够拥有使用ng-repeat 创建的表行，其类也基于一个条件，该条件取决于对行本身的范围特性的访问，例如。 person。我意识到我可以在列上添加 ng-class，但这很无聊。谁有更好的主意？

【问题讨论】：

How do I conditionally apply CSS styles in AngularJS? 的可能重复项

【参考方案1】：

通常我喜欢给出更全面的答案，但是这部分涉及的代码太多，无法做到这一点。所以只会展示什么是最重要的，并希望看到这个的任何人都知道如何使用它。我的动态 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>

【参考方案2】：

这实际上应该可以正常工作。 Person 应该在 tr 元素及其子元素上可用，因为它们共享相同的范围。

这对我来说似乎很好用：

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

http://jsfiddle.net/xEyJZ/

【参考方案3】：

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

查看此 Plnkr：

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6