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

您可以使用内置为angular的ngClassEven和ngClassOdd指令执行此操作，以便与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基于任何逻辑应用条件类。假设您想要设置其项目的字段myField大于5的每一行。

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

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

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

1 个答案: