Установите zIndex программно на Div в AngularJS

Question

У меня есть несколько Div на макете, каждый из которых перетаскивается, поэтому есть возможность перетаскивать их в позиции, где они будут перекрываться.

Я хочу установить последнее сделанное видимое div, чтобы иметь значение z-index, равное +1 от последнего, и для этого я использую переменную $ scope.nextIndex, которая увеличивается каждый раз, когда один из div сделанный видимым.

Каждый div имеет свою переменную для отслеживания собственного значения z-индекса: $ scope.one_zIndex, $ scope.two_zIndex, $ scope.three_zIndex и каждому правильному присваивается пошаговое большее значение по мере отображения каждого div, скрытого и показано снова.

Каждый ДИВ имеет свой собственный класс: one_z, two_z, three_z

То, что я не могу сделать работу является назначение переменной в стиле г-индекс на дивы себя через контроллер.

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

Если я вхожу на консоль, я получаю то, что я ожидал - массив с одним элементом [0]

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

Я предположил бы, что я мог бы установить г-индекс просто так :

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

Однако это выдает ошибку:

 Uncaught TypeError: Cannot set property 'zIndex' of undefined 

Что мне не хватает? Или есть лучший способ сделать это?

Answer 1

Вот рабочая plunker https://plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview

Вы можете установить ZIndex через нг-стиль:

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

Этот пример совершенно бесполезно в вашем случае, но есть пример нг-стиле использование. В вашем случае я бы установил индекс как свойство вашего источника данных элемента div.

Answer 2

Что завелся работает это было:

Во-первых, я переключился на идентификаторы вместо классов, которые, вероятно, не влияют на решение, но так как каждый ДИВ только когда-либо будет существовать, как только идентификаторы было более правильным способ их идентификации.

Тогда, в функции, которая отображает DIV, я использовал это:

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

Там оказался вопрос, где я показывал DIV и пытается установить его г-индекс до того обновил DOM чтобы включить div, поэтому _.defer (я использую Underscore.js) предотвратил доступ к z-индексу до тех пор, пока все не обновится один раз, и он будет работать.

Как я уже упоминал в другом комментарии - использование ng-стиля для меня не работало, и я уже пробовал _.defer с этим подходом, но изначально без успеха.

Для записи - я использовал jQuery() вместо $(), поэтому в коде ясно, что это jQuery, а не угловое решение, и хотя мне идеально понравилось чисто угловое решение для эта проблема, это достаточно чистая для меня, и не делает никаких манипуляций с DOM вне сферы компетенции Angular, что никак не влияет на остальную часть приложения, это чисто конфета.