AngularJSng-style

Introduction

The 'ngStyle' directive allows you to set CSS style on an HTML element conditionally. Much like how we could use style attribute on HTML element in non-AngularJS projects, we can use ng-style in angularjs do apply styles based on some boolean condition.

Syntax

<ANY ng-style="expression"></ANY >
<ANY class="ng-style: expression;"> ... </ANY>

Use of ng-style

Below example changes the opacity of the image based on the "status" parameter.

 <img class="img-responsive"  ng-src="{{imagesrc}}"
     ng-style="{'opacity' : (status == 2) ? 1 : 0.5}">

Previous Next

This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0

This website is not affiliated with Stack Overflow