I need to calculate the with depending on a scope value. I've been trying something like this:
<div class="scene" ng-style="{ 'width': '(illustrationStyles.Width /5000) * 100' % }">
But i can't get it to work. I can't really find any good examples of this either.
Is it possible to do calculations in ng-style?
You should need to remove single quotes and add percern sign at last.
Replace
<div class="scene" ng-style="{ 'width': '(illustrationStyles.Width /5000) * 100' % }">`
With
<div class="scene" ng-style="{ 'width': (illustrationStyles.Width /5000) * 100 + '%' }">
I hope that will work.
Thanks...
Try doing your calculations in the controller
var calValue = ((illustrationStyles.Width /5000) * 100) + %
removes the extra single quote, and adds the percent at end:
<div class="scene" ng-style="{ 'width': ((illustrationStyles.Width /5000) * 100) + '%' }">
Your value must be in between quotes.
function ClickToEditCtrl($scope) {
$scope.title = "Style with calc";
$scope.illustrationStyles = {
Width : 4000
};
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<div ng-style="{'width': (illustrationStyles.Width /5000) * 100 + '%', 'background-color': 'red'}">
{{ title }}
</div>
</div>
</div>