5

I am trying to add dynamically set the height of a div, but it is not successfully being set. I get the height of window and divide it by 3, but it is not working. Here is where I set the height:

<div id="wrapper" ng-style="height :hgt+'px'">

I am setting the scope variable like this:

 $scope.hgt = $window.innerHeight / 3;

But the height isn't set.

Plunker http://plnkr.co/edit/eGaPwUdPgknwDnozMJWU?p=preview

4 Answers 4

10

The usage of ng-style is slightly counter-intuitive. You're attempting to use it to interpolate values, but per the Angular documentation ng-style takes an expression "which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys."

Thus, you might want to try:

$scope.hgt = { height: ($window.innerHeight / 3) + 'px' };
<div id="wrapper" ng-style="hgt">

Hope this helps!

6

You should put a dictionary in ng-style like below

<div id="wrapper" ng-style="{height: '{{hgt}}px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>
1
  • checking wait for seconf
    – user944513
    Commented May 31, 2015 at 1:22
1

Try this :

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
0

Per the documentation: https://docs.angularjs.org/api/ng/directive/ngStyle

ng-style takes an object, not a string. Here is the fix:

<div id="wrapper" ng-style="{ height :hgt+'px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.