javascript - 执行 ng-repeat 后如何更改表格行的颜色

Question

您好，我的元素正在处理 Django 和 Python 以及一些 AngularJS。我想要实现的是我有一个动态历史表，它会在数据填充时增加。我想在这个表中添加一个简单的 css，比如对于每一个偶数行，我需要为该行添加一个黑色背景，为奇数行添加一个灰色背景。我的表看起来像这样。我怎样才能做到这一点？有什么想法吗？提前致谢。

<table class="table table-bordered">
                    {%verbatim %}
                    <tr align="center">
                        <td><b>Modified By</b></td>
                        <td><b>Modified Date</b></td>
                        <td><b>Field</b></td>
                        <td><b>Old Value</b></td>
                        <td><b>New Value</b></td>

                    </tr>
                    <tr align="center" ng-repeat="(k,v) in final_data.histories" onMouseOver="this.style.background='#d2d2d2'; this.style.color='#000000'"
                        onMouseOut="this.style.background='#f5f5f5'; this.style.color='#000000'" ng-cloak>
                        <td>{{ v.username }}</td>
                        <td>{{ v.date_created }}</td>
                        <td>{{ v.field_name }}</td>
                        <td>{{ v.old_value }}</td>
                        <td>{{ v.new_value }}</td>
                    </tr>

Answer 1

您可以使用 ngClassEven 执行此操作和 ngClassOdd 指令内置于 angular 中，与 ng-repeat 一起使用。例如:

<tr ng-repeat="(k,v) in final_data.histories" ng-class-even="'my-even-class'" ng-class-odd="'my-odd-class'">

然后您只需将 my-even-class 和 my-odd-class 类添加到您的 css 中，并根据需要设置样式。

---

更新:如果您对样式有更复杂的要求(例如，不仅仅是基于一行是奇数还是偶数，您可以使用 ng-class 根据您想要的任何逻辑应用条件类. 假设您想要设置其元素具有大于 5 的字段 myField 的每一行的样式。

<div ng-class="{'my-class' : v.myField > 5}"></div>

这只会将 my-class 类放在符合条件的元素上，然后可以根据需要设置样式。