Темнее фоновый цвет динамически с AngularJS

Question

Темнее фоновый цвет динамически с AngularJS

0

Ситуация: У меня есть таблица с разными цветами фона для каждой строки.
Проблема. Когда я сортирую строки по столбцу, я хотел бы немного затемнить каждый <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 файлы, если это может помочь.

Leo 24 март 2016, в 16:36

Источник

Теги:

html

angularjs

css

background-color

1 ответ

Ещё вопросы

Christofer Eliasson · Answer 1 · 2016-03-24T12-52-00.000Z

Я думаю, что было бы проще просто применить класс, sorted а затем сделать стиль с помощью CSS.

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

Легче поддерживать, если весь стиль управляется через ваш CSS.

Затем вы можете использовать SASS darken() чтобы затемнить цвета для каждого столбца.

Когда у меня есть 20 различных цветов bgackground, это не победитель игры.
@ Leo Не знаете, как выглядит ваша установка? Цвета каждого столбца рандомизированы / рассчитаны? Если нет, я вообще думаю, что лучше контролировать их через CSS. В большинстве случаев наличие JS влияет на внешний вид вещей.