Menu
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.
383
With style binding we can set only a single style, however to set multiple styles we can use ngStyle directive.
Use property binding to style one CSS property of an element and use the ngStyle directive to set multiple CSS properties. Both tools make it super easy to dynamically style elements.
Combining NgStyle and NgClass Directives with our knowledge of Angular Template Syntax, we can marry conditional styling with Angular's Property & Event Binding.
The NgClass and NgStyle directives are used to apply style to the HTML element conditionally. The NgClass allows you to apply whole class based on condition whereas NgStyle gives you more flexibility to set individual properties.
Use below on view
<div ng-style="{
'width': calc('100% -'+fixedColumnsWidth),
'margin-left': fixedColumnsWidth}">
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
