Aplicar atributo de estilo CSS dinamicamente no Angular JS

Este deve ser um problema simples, mas não consigo encontrar uma solução.

Eu tenho a seguinte marcação:

Eu preciso que a cor de fundo seja vinculada ao escopo, então eu tentei isso:

 

Isso não funcionou, então eu fiz alguma pesquisa e encontrei o ng-style , mas isso não funcionou, então eu tentei tirar a parte dinâmica e apenas codificar o estilo no estilo ng-style , assim …

 

e isso nem funciona. Eu estou entendendo mal como funciona o ng-style ? Existe uma maneira de colocar {{data.backgroundCol}} em um atributo de estilo simples e obtê-lo para inserir o valor?

A diretiva ngStyle permite que você defina o estilo CSS em um elemento HTML dinamicamente.

Expressão que avaliou para um object cujas chaves são nomes e valores de estilo CSS são valores correspondentes para essas chaves CSS. Como alguns nomes de estilo CSS não são chaves válidas para um object, eles devem ser citados.

ng-style="{color: myColor}"

Seu código será:

 

Se você quiser usar variables ​​de escopo:

 

Aqui um exemplo de violino que usa ngStyle e abaixo do código com o snippet em execução:

 angular.module('myApp', []) .controller('MyCtrl', function($scope) { $scope.items = [{ name: 'Misko', title: 'Angular creator' }, { name: 'Igor', title: 'Meetup master' }, { name: 'Vojta', title: 'All-around superhero' } ]; }); 
 .pending-delete { background-color: pink } 
  
name: {{item.name}}, {{item.title}} (will be deleted)

I will hide if the color is set to 'red'.

A maneira mais fácil é chamar uma function para o estilo e fazer com que a function retorne o estilo correto.

 

E no seu controlador:

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

Diretamente do ngStyle docs :

Expressão que avaliou para um object cujas chaves são nomes e valores de estilo CSS são valores correspondentes para essas chaves CSS.

 

Então você poderia fazer isso:

 

Espero que isto ajude!

Em uma nota genérica, você pode usar uma combinação de mudanças condicionais no estilo ng-if e ng com mudança na imagem de fundo.

     

Eu diria que você deve colocar estilos que não serão alterados em um atributo de style regular e estilos condicionais / escopo em um atributo ng-style . Além disso, as chaves de string não são necessárias. Para chaves CSS delimitadas por hífen, use camelcase.