Angular ng-style con una expresión condicional

Estoy manejando mi problema de esta manera:

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

Pero para evitar tener esta función en el lado del controlador, preferiría hacer algo como esto:

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

¿Cómo puedo hacer esto?

Como dijo @Yoshi, desde angular 1.1.5 puedes usarlo sin ningún cambio.

Si usa angular <1.1.5, puede usar ng-class .

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

ejemplo simple:

  

{‘background-color’: ‘green’} RETURN true

O el mismo resultado:

  

otra posibilidad condicional:

 

Puedes lograrlo así:

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

@jfredsilva obviamente tiene la respuesta más simple para la pregunta:

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

Sin embargo, es posible que desee considerar mi respuesta para algo más complejo.

Ejemplo ternario:

 

Algo más complejo:

 

Test

Si $scope.color == 'blueish' , el color será ‘azul’.

Si $scope.zoom == 2 , el tamaño de la fuente será 26px.

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

si quieres usar con expresión, la forma correcta es:

 Sample Text 

pero la mejor manera es usar ng-class

En una nota genérica, puede usar una combinación de cambios condicionales ng-if y ng-style con cambio en la imagen de fondo.

   

también esta syntax para el operador ternario funcionará:

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

donde son $ valores de propiedad del scope. Por ejemplo:

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

“ `

esto permite algunos cálculos en los valores de propiedad css.

Estoy haciendo lo siguiente para condiciones múltiples e independientes y funciona como encanto:

 

Para propiedad single css

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

Para múltiples propiedades CSS a continuación puede ser referido

ng-style = “1 == 1 && {‘color’: ‘rojo’, ‘estilo de fuente’: ‘cursiva’}”

Reemplaza 1 == 1 con tu expresión de condición