Angular estilo ng com uma expressão condicional

Estou lidando com meu problema assim:

ng-style="{ width: getTheValue() }" 

Mas, para evitar essa function no lado do controlador, eu preferiria fazer algo assim:

 ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }" 

Como posso fazer isso?

Como @Yoshi disse, a partir de 1.1.5 angular você pode usá-lo sem qualquer alteração.

Se você usar angular <1.1.5, poderá usar ng-class .

 .largeWidth { width: 100%; } .smallWidth { width: 0%; } // [...] ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}" 

exemplo simples:

  

{‘cor de fundo’: ‘verde’} RETURN true

OU o mesmo resultado:

  

outra possibilidade condicional:

 

Você pode conseguir assim:

 ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }" 

@jfredsilva obviamente tem a resposta mais simples para a pergunta:

ng-style = “{‘width’: (myObject.value == ‘ok’)? ‘100%’: ‘0%’}”

No entanto, você pode realmente querer considerar minha resposta para algo mais complexo.

Exemplo semelhante ao ternário:

 

Algo mais complexo

 

Test

Se $scope.color == 'blueish' , a cor será ‘azul’.

Se $scope.zoom == 2 , o tamanho da fonte será 26px.

 angular.module('app',[]); function MyCtrl($scope) { $scope.color = 'blueish'; $scope.zoom = 2; } 
  
color = {{color}}
zoom = {{zoom}}

se você quiser usar com expressão, o caminho certo é:

 Sample Text 

mas a melhor maneira é usar ng-class

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

   

também esta syntax para o operador ternário funcionará:

  ng-style="<$scope.var> ? { '':(() / ()*100)+'%', '':'' } : { '':'', '':'' }" 

onde são valores da propriedade $ scope. No exemplo:

 ng-style="column.histograms.value=>0 ? { 'width':((column.histograms.value) / (column.histograms.limit)*100)+'%', 'background':'#F03040' } : { 'width':'1px', 'background':'#2E92FA' }" 

“ `

isso permite algum cálculo nos valores da propriedade css.

Eu estou fazendo como abaixo para condições múltiplas e independentes e funciona como charme:

 

Para uma propriedade única do css

ng-style = “1 == 1 && {‘color’: ‘vermelho’}”

Para várias propriedades css abaixo pode ser referido

ng-style = “1 == 1 && {‘color’: ‘vermelho’, ‘estilo de fonte’: ‘itálico’}”

Substitua 1 == 1 por sua expressão de condição