angulargs ng-repeat ng-repeat

Question

私はこのコードを使って、ng-repeatの中でモーダルを開きます。私はIDをハードコードする限り、モーダルは正常に動作しています。しかし、私はそれがレコード2、3のためだ場合

 <div class="w3-container w3-center w3-yellow"> 
     <!-- Trigger/Open the Modal --> 
     <button onclick="document.getElementById('{{ x.Id }}').style.display='block'" 
     class="w3-button">Meer foto's</button> 
    </div> 

    <!-- The Modal --> 
    <div id="{{ x.Id }}" class="w3-modal"> 
     <div class="w3-modal-content"> 
     <div class="w3-container"> 
      <span onclick="document.getElementById('1002').style.display='none'" 
      class="w3-button w3-display-topright w3-red">&times;</span> 
      <div class="w3-row-padding w3-margin"> 
       <div class="w3-third"> 
        <div class="w3-card-2"> 
        <img src="/administratie/assets/uploads/files/{{ x.Foto_1 }}" style="width:100%"> 
        </div> 
       </div> 
       <div class="w3-third"> 
        <div class="w3-card-2"> 
        <img src="/administratie/assets/uploads/files/{{ x.Foto_2 }}" style="width:100%"> 
        </div> 
       </div> 
       <div class="w3-third"> 
        <div class="w3-card-2"> 
        <img src="/administratie/assets/uploads/files/{{ x.Foto_3 }}" style="width:100%"> 
        </div> 
       </div> 
      </div> 
      <div class="w3-row-padding w3-margin"> 
       <div class="w3-third"> 
        <div class="w3-card-2"> 
        <img src="/administratie/assets/uploads/files/{{ x.Foto_4 }}" style="width:100%"> 
        </div> 
       </div> 
       <div class="w3-third"> 
        <div class="w3-card-2"> 
        <img src="/administratie/assets/uploads/files/{{ x.Foto_5 }}" style="width:100%"> 
        </div> 
       </div> 
       <div class="w3-third"> 
        <div class="w3-card-2"> 
        <img src="/administratie/assets/uploads/files/{{ x.Foto_6 }}" style="width:100%"> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

onclickのはしかし、私はどちらかの作業NGクリックをすることはできません受理されていないなど、別のモーダルを開きたいです。誰かが私にこれを解決する方法のヒントを教えてもらえますか？

Answer 1

まず、anglejを使用している場合は、ng-clickを使用してonclickを使用しないでください。

第2に、DOM要素を操作して純粋なjavascript/jQueryで要素を非表示にしないでください。あなたはAngularJSを使用しています。

単純な目的のために、2つのボタンがあると、1つは何かを閉じるものが表示されます。したがって、最初のボタン（開いているボタン）にはng-click="isShowing=true"を使用し、2番目のボタン（閉じるボタン）にはng-click="isShowing=false"

が表示されます。ng-show="isShowing"を使用して、表示する要素にdivをvisible/hiddenに設定します。ボタンが押されていない限り、注意してください。isShowingプロパティは存在しません。それは定義されません.-それは表示されません。クリックするとtrueに設定され、divを表示し、閉じるために他のボタンをクリックします。 falseに設定してdivを非表示にする必要があります。モーダルを表示する必要があり、ボタン上のあなたの特定の例では

：

<div id="{{ x.Id }}" ng-show="isShowing" class="w3-modal"> 

と終了閉じスパンで：

<span ng-click="isShowing=false" class="w3-button w3-display-topright w3-red">&times;</span> 

キープモーダルdivの上

<button ng-click="isShowing=true" class="w3-button">Meer foto's</button> 

、その後、あなたが悪いCSSスタイルを持っていれば、これは表示/非表示を妨げる​​可能性があります。そして、私はあなたがvanillaJS/jQueryのバックグラウンドから来ているのを見て、これを読むことをお勧めします： https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers