Customize AngularJS ng-style

angularjscssjavascript
tomoyukikashiro
tomoyukikashiro

Basic Usage

You can set style value using scope.

<div image class="image" ng-style="{'background-image': 'url(' + backimg + ')'}">
$scope.backimg = 'XXXXX' // image url

You can switch style value using expression.

<div image class="image" ng-style="{ 'width': isMobile: ? '200px': '300px' }">
$scope.isMobile = true // switch value to change style

Customize Usage

How to change style propertry and value using expression

<div image class="image" ng-style="getStyle(ua)">
$scope.getStyle = function(ua){
  if(ua.match(/Android/i)){
    return { display: 'none' };
  }else{
    return { width: '300px': height: '300px' };
  }
}