How to pass a variable to css in AngularJS

Question

I'm trying to make a virtual scroll and whenever the user scrolls down I need to add a negative top equal to the container height to each row. But of course this top property can vary depending of some factors like the user's screen resolution or browser window size.

So far this is what I got:

  <div class="container" id="my-container">
  <!--If it has the class row-scrolled the top property is applied-->
      <div ng-repeat="(row) in virtualCollection"
       ng-class="{'row-scrolled': controller.isScrolled}">
         <!-- row properties -->
      </div>
  </div>

I have also thought about the idea of using ng-style but would override any style from my .css file.

Is there anyway to get the size/property of a DOM element...

// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';

And then use it in an css?

// css
.row-scrolled {
  top: cssProperty;
}

Why would ng-style "override any style from your .css file."? Isn't that the expected result? Ng-style dynamically adding the expected calculated height to the element? — SPArcheon - on strike
– SPArcheon - on strike, Commented Jan 25, 2018 at 9:03
@SPArcheologist Well I am using material design and using ng-style would get rid of any style. I would have to insert in my ng-style every single property applied to that row. I forgot to say that in my question, my apologies. — user5421954
– user5421954, Commented Jan 25, 2018 at 9:08

flx · Accepted Answer · 2018-01-25 09:09:08Z

2

You can't pass variables from javascript to CSS since CSS is not a programming language but a style sheet language.

What you can do is manipulating specific elements with javascript. Based on your code here is an example:

// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $$rowScrolled = document.querySelectorAll(".row-scrolled");

if ($$rowScrolled && $$rowScrolled.length > 0) {
    for (var i = 0; i < $$rowScrolled.length; i++) {
        var $rowScrolled = $$rowScrolled[i];

        $rowScrolled.style.top = cssProperty;         
    }
}

With jQuery:

// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $rowScrolled = $(".row-scrolled");

if ($rowScrolled && $rowScrolled.length > 0) {
    $rowScrolled.css("top", cssProperty);
}

edited Jan 25, 2018 at 9:09

answered Jan 25, 2018 at 8:53

flx

1,57814 silver badges22 bronze badges

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

2 Comments

user5421954 Over a year ago

I was hoping to not use a loop for such thing since I had problems re-rendering my virtual collection and adding changing css properties at the same time. Thank you very much.

flx Over a year ago

Using jQuery would not require using a loop

joshua miller · Accepted Answer · 2018-01-25 08:55:26Z

0

You can not pass a variable to the CSS.

What you can do though is add the property directly using the ng-style tag:

<div class="container" id="my-container">
  <!--If it has the class row-scrolled the top property is applied-->
  <div ng-repeat="(row) in virtualCollection"
   ng-style="{'top': controller.cssProperty}">
     <!-- row properties -->
  </div>

answered Jan 25, 2018 at 8:55

joshua miller

1,7661 gold badge15 silver badges24 bronze badges

1 Comment

joshua miller Over a year ago

This answer is assuming that you can access the controllers properties using the 'controller' keyword. You might have to use $scope, or if it's a component '$ctrl' instead.

Collectives™ on Stack Overflow

How to pass a variable to css in AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related