Set zIndex programmatically on a Div in AngularJS

Question

I have a number of Div's on a layout, each of them draggable, so there's the possibility of the user dragging them into positions where they will overlap.

I want to set the most recently made visible div to have a z-index value that's +1 from the last, and for this I'm using a $scope.nextIndex variable that's incremented each time one of the div's is made visible.

Each div has its own variable to track its own z-index value: $scope.one_zIndex, $scope.two_zIndex, $scope.three_zIndex, and each correctly gets assigned an incrementally larger value as each div is shown, hidden and shown again.

Each div has its own class: one_z, two_z, three_z

What I can't make work is assigning the variable to the z-index style on the divs themselves via the controller.

    var myVar = document.getElementsByClassName("one_z");

If I log this to the console, I get what I expect - an array with one element [0]

    []
     0 : div#one_z
     length : 1
     one_z : div#one_z
    __proto__ : HTMLCollection

I would assume that I could set the z-index simply like this:

    myVar[0].style.zIndex = $scope.one_zIndex;

However this throws an error:

     Uncaught TypeError: Cannot set property 'zIndex' of undefined

What am I missing? Or is there a better way to accomplish this?

Kindzoku · Accepted Answer · 2016-09-06 07:07:50Z

2

Here is a working plunker https://plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview

You can set zindex via ng-style:

<div ng-style="{'z-index': $lastIndex;}">...</div>

This example completely useless in your case, but there is an example of ng-style usage. In your case I'd set index as property of you div element data source.

edited Sep 6, 2016 at 7:07

answered Sep 4, 2016 at 21:28

Kindzoku

1,4001 gold badge11 silver badges29 bronze badges

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

3 Comments

Stephen R. Smith Over a year ago

Unfortunately ng-style doesn't seem to work in this instance. That was my initial solution, but the div's never get the z-index values applied to them, which is why I'm now trying to use jQuery to update the DOM after everything is rendered.

Kindzoku Over a year ago

Here is a working plunker plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview, as you can see, there is no problem with z-index and div. And this is 100% angular way of solving this case.

Stephen R. Smith Over a year ago

This syntax was where I was having the issue – myVar.styles = { 'z-index': myIndex}; where I was using myVar.style.zIndex, and you're right - this is what I'd hoped to be able to do.

Stephen R. Smith · Accepted Answer · 2016-09-05 20:23:03Z

0

What wound up working was this:

First, I switched to IDs instead of classes, which likely didn't impact the solution but as each div was only ever going to exist once, IDs was the more correct way of identifying them.

Then, in the function that displays the div, I used this:

        _.defer(function(){
            jQuery('#one_z').css('z-index', $scope.one_zIndex);
         });

There appeared to be an issue where I was showing the div and trying to set its z-index before the DOM had updated to include the div, so _.defer (I'm using Underscore.js) prevented the accessing of the z-index until everything had updated once, and it works.

As I mentioned in another comment - using ng-style wasn't working for me, and I had tried the _.defer with that approach as well initially without success.

For the record - I've used jQuery() instead of $() so it's clear in the code that this is a jQuery and not an Angular solution, and while I'd ideally have liked a purely Angular solution to this problem, this is clean enough for me, and doesn't do any DOM manipulation outside of Angular's purview that impacts the rest of the application in any way, it's purely display candy.

answered Sep 5, 2016 at 20:23

Stephen R. Smith

3,4001 gold badge29 silver badges46 bronze badges

2 Comments

Kindzoku Over a year ago

I guess you have error somewhere else then. There is no problem with divs and z-index at all. stackoverflow.com/a/32226930/5453843 .

Kindzoku Over a year ago

It's a bad habbit to use jQuery with angular. If you need to manipulate DOM with jQuery, it's a signal you're doing something wrong.

Collectives™ on Stack Overflow

Set zIndex programmatically on a Div in AngularJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related