Применить атрибут стиля CSS динамически в Angular JS

это должна быть простая проблема, но я не могу найти решение.

у меня есть следующие разметки:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

мне нужно, чтобы цвет фона был привязан к области, поэтому я попробовал это:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

это не сработало, поэтому я провел некоторые исследования и нашел ng-style, но это не сработало, поэтому я попытался взять динамическую часть и просто жестко кодировать стиль в ng-style, как это...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

и это даже не работает. Я непонимание как ng-style работает? Есть ли способ положить {{data.backgroundCol}} в простой атрибут стиля и заставить его вставить значение?

106
angularjs javascript ng-style

5 ответов

180

самый простой способ-вызвать функцию для стиля, и функция вернет правильный стиль.

<div style="{{functionThatReturnsStyle()}}"></div>

и в вашем контроллере:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}
23

непосредственно с ngStyle docs:

выражение, которое evals к объекту, ключи которого являются именами стилей CSS и значения соответствующие значения для этих ключей CSS.

<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>

Так что вы могли бы сделать это:

<div ng-style="{'background-color': data.backgroundCol}"></div>

надеюсь, что это помогает!

18

В общем примечании Вы можете использовать комбинацию ng-if и NG-style, включающую условные изменения с изменением фонового изображения.

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
14

Я бы сказал, что вы должны поместить стили, которые не будут меняться в обычный style атрибут и условные стили/область в . Кроме того, ключи string не нужны. Для ключей CSS с дефисами используйте camelcase. 

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>
0