ng-click 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

首先，如果您使用的是angularjs，请不要使用onclick，请使用ng-click。

其次，不要通过操纵DOM元素来隐藏纯javascript/jQuery的元素，而是使用AngularJS来做AngularJS的方式，即ng-show。

出于简单的目的，我会说你有2个按钮，一个会显示一些东西会关闭的东西。所以在第一个按钮（开门按钮），你应该使用ng-click="isShowing=true"和第二个（关闭按钮）将有ng-click="isShowing=false"

然后使用ng-show="isShowing"将设置DIV可见/隐藏在你要显示的任何元素。请记住，只要按钮没有按下isShowing属性不存在，它将是未定义的 - 虚假的，它不会显示，点击后它将被设置为true并显示div，然后如果您点击其他按钮关闭它应该将其设置为false并隐藏div。

在上的按钮，应该显示模式的具体的例子：

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

，然后在模态的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> 

保持记住，如果你有一些不好的CSS样式，这可能会干扰显示/隐藏。我会推荐这个阅读，因为我可以看到你来自vanillaJS/jQuery背景： https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers