ng-style

I need to have multiple raw style attributes like : $scope.css = "'width': 'calc(100% - "+$scope.fixedColumnsWidth+"'),'margin-left':'"+ $scope.fixedColumnsWidth+"'"; <div ng-style="{css}"> This is not working. It works when I use <div style="{{css}}"> But not for IE. ng-style waits for an object literal, so you need to adjust your code to $scope.css = { width: 'calc(100% -'+$scope.fixedColumnsWidth+')', 'margin-left': $scope.fixedColumnsWidth } <div ng-style="css"></div> Use below on view <div ng-style="{ 'width': calc('100% -'+fixedColumnsWidth), 'margin-left': fixedColumnsWidth}"> 来源： https

I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working. <nav class="navigation-grid-container" data-ng-class="{ bigger: isNavActive == true }" data-ng-controller="NavigationCtrl" data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" data-ng-show="$parent.navInvisible == false" data-ng-animate="'fade'" ng-cloak> <ul class="navigation-container unstyled clearfix"> <li class="navigation-item

When i use Angular to dynamic change div 's backgroundImage , i find there are two ways to set backgrond-image: first: <div style="background:url({{example_expression}})"></div> the second: <div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div> But when i change example_expression , only the first way can dynamically change the backgroundImage. There is a example in Plunker What's wrong with ngStyle? ng-style should not contain {{}} interpolation directive, you could directly access scope variable there. Also backgroundImage should be 'background-image' Markup <div ng-style="{

I am trying to set the div width dynamically using ng-style but it is not applying the style. Here is the code: <div style="width: 100%;" id="container_fform" ng-controller="custController"> <div style="width: 250px;overflow: scroll;"> <div ng-style="myStyle"> </div> </div> </div> Controller: var MyApp = angular.module('MyApp', []); var custController = MyApp.controller('custController', function ($scope) { $scope.myStyle="width:'900px';background:red"; }); What am I missing? Fiddle link: Fiddle The syntax of ng-style is not quite that. It accepts a dictionary of keys (attribute names) and

Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2? in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element. I tried something like <div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'"> it didn't work. I also tried this <div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'"> dfsq No it's not possible. It is actually not an Angular issue: pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can