html - 使用 AngularJS 动态变暗当前背景颜色

Question

情况:我有一张表格，每一行的背景颜色都不同。
问题:当我按列对行进行排序时，我想每隔 <td> 变暗一点来自该列，基于 background-color的行。到目前为止，我有这样的事情:

<tr ng-repeat='row in rows' ng-class="rowClass(row)">
   <td ng-repeat=column in columns"
       ng-style="{'background-color': (isSortedBy(column.key)) ? 'rgba(0, 0, 0, 0.05)' : ''}">
     {{column.text}}
   </td>
</tr>

我现在所做的只是将颜色更改为灰色(0.05 的黑色)。我不知道如何获取 <td> 的当前背景颜色在上面添加 0.05 的黑色并应用新的 background-color .在我的元素中，我使用 sass文件，如果它可能有帮助。

Answer 1

我认为简单地应用类 sorted 然后使用 CSS 进行样式设置会更简洁。

ng-class="{'sorted': (isSortedBy(column.key)) }

如果所有样式都通过您的 CSS 进行管理，则更易于维护。

然后您可以使用 SASS darken()使每列的颜色变暗。