AngularJS内のDivにプログラムでzIndexを設定する

Question

私はレイアウト上に複数のdivがあり、それぞれがドラッグ可能なので、重複する位置にドラッグする可能性があります。

私は最後に作成した表示divに、最後から+1のZ-インデックス値を設定したいと思います。このために、divの1つが増えるたびに$ scope.nextIndex変数を使用しています見えるようにした。

各divには、独自のz-インデックス値（$ scope.one_zIndex、$ scope.two_zIndex、$ scope.three_zIndex）をトラッキングするための独自の変数があり、各divが表示されるたびに段階的に大きな値が割り当てられます再び表示されます。私は仕事がコントローラを介してのdivの上に自分自身をZインデックススタイルに変数を代入されていることを確認することはできませんどのような

three_z one_z、t​​wo_z、：

各divが独自のクラスを持っています。

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

私はコンソールにこれをログインした場合、私は私が期待するものを手に入れる - 1つの要素を持つ配列を[0]

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

私は単にこのようにZインデックスを設定することができることを前提とします：

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経由ngのスタイルを設定することができます：あなたのケースで

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

この例で完全に役に立たないが、NGスタイルの例があります用法。あなたの場合、私は要素のデータソースをdivのプロパティとしてインデックスを設定したいと思います。作業巻き上げ何

Answer 2

は、このでした：

まず、私はIDの代わりの可能性の高いソリューションに影響を与えるが、それぞれのdivしか今まで一度に存在するつもりだったように、IDがより正しかったしませんでしたクラスに切り替えそれらを識別する方法。そこ

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

DOMが更新されていた前に、私はdiv要素を示し、そのZインデックスを設定しようとしていた問題であるように思われた：

はその後、DIVを表示する機能で、私はこれを使用しましたdivを含めると、_.defer（私はUnderscore.jsを使用しています）は、すべてが一度更新されるまでz-indexへのアクセスを防ぎ、動作します。

私が別のコメントで述べたように、ng-styleを使うのは私のためには機能しませんでしたが、私はこのアプローチで_.deferを試してみました。

私は$（）の代わりにjQuery（）を使用しましたので、これはjQueryで角度ソリューションではないことがコード内ではっきりしていますが、私は理想的にはこの問題は、これは私のために十分にきれいであり、アプリケーションの残りの部分にどのような影響を与えるAngularの範囲外のDOM操作も行われません。純粋に表示キャンディです。