0

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?

0

4 Answers 4

1

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...

Sign up to request clarification or add additional context in comments.

Comments

0

Try doing your calculations in the controller

var calValue = ((illustrationStyles.Width /5000) * 100) + %

Comments

0

removes the extra single quote, and adds the percent at end:

<div class="scene" ng-style="{ 'width': ((illustrationStyles.Width /5000) * 100) + '%' }">

Comments

0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.