以编程方式在 AngularJS 中的 Div 上设置 zIndex

Question

我在一个布局上有多个 Div，每个都是可拖动的，因此用户可以将它们拖动到它们将重叠的位置。

我想将最近可见的 div 的 z-index 值设置为比上一个增加 1，为此我使用了递增的 $scope.nextIndex 变量每次 div 中的一个可见。

每个 div 都有自己的变量来跟踪自己的 z-index 值：$scope.one_zIndex、$scope.two_zIndex、$scope.three_zIndex，并且每个都正确分配随着每个 div 的显示、隐藏和再次显示，值逐渐变大。

每个 div 都有自己的 class：one_z、two_z、three_z

我做不到的是通过控制器将变量分配给 divs 本身的 z-index 样式。

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

如果我将此记录到控制台，我会得到我所期望的 - 一个包含一个元素 [0]

的数组

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

我假设我可以像这样简单地设置 z-index:

    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

您可以通过 ng-style 设置 zindex:

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

这个例子在你的情况下完全没用，但是有一个 ng-style 用法的例子。在你的情况下，我将索引设置为属性 of you div element data source.

Answer 2

最终起作用的是：

首先，我切换到 ID 而不是类，这可能不会影响解决方案，但由于每个 div 只会存在一次，ID 是更正确的方法识别它们。

然后，在显示 div 的函数中，我使用了这个：

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

我在显示 div 并尝试在 DOM 更新为包含 div 之前设置其 z-index 时出现问题，因此 _.defer（我正在使用 Underscore.js）阻止了对 z-index 的访问，直到所有内容都更新一次，并且它有效。

正如我在另一条评论中提到的那样 - 使用 ng-style 对我不起作用，我也尝试过 _.defer 最初也没有成功。

郑重声明 - 我使用了 jQuery() 而不是 $() 所以在代码中很清楚这是一个 jQuery 而不是 Angular 解决方案，虽然理想情况下我希望有一个纯粹的 Angular 解决方案来解决这个问题，但这对我来说已经足够干净了，并且不会在 Angular 的权限之外进行任何 DOM 操作以任何方式影响应用程序的其余部分，它纯粹是展示糖果。

以编程方式在 AngularJS 中的 Div 上设置 zIndex

Set zIndex programmatically on a Div in AngularJS

z-index

getelementbyid

angularjs