ng-repeat内の特定のアイテムのスタイルを変更するにはどうすればよいですか？

Question

私はng-repeatを使用して自分のウェブサイトに料理の投稿を掲載しています。私はそれをクリックするとモーダルを開きたいと思います（このモーダルはその料理のデータにアクセスできます）。これを行うには、私は各料理に独自のid（dish-$ index）を持つモーダルdivを与え、display：noneからdisplay：blockへのモーダルのスタイルを変更しようとしています。なんらかの理由で、私のIDで要素を取得することはできません - {{$ index}} javascript（nullを返します）。なぜこれが機能しないのか、これを行うにはよりよい方法はありますか？私はブートストラップを使いたくない。

 <!-- Trigger/Open The Modal --> 
     <button class="order">Open Modal</button> 

     <div id="dish-{{$index}}" class="modal4"> 

      <!-- Modal content --> 
      <div class="modal-content4"> 
      {{dish.dishName}} 

      <span class="close4">x</span> 
      </div> 

     </div> 
    </div> 

var selector = 'div[ng-id="' + child.key + '"]'; 
var modal4 = document.getElementById("dish-{{$index}}"); 
var span4 = document.getElementsByClassName("close4")[0]; 

$('body').on('click', selector, function() { 
    google.maps.event.trigger(marker, 'click', {}); 
    modal4.style.display = "block"; 
       }); 

Answer 1

は、JavaScript（document.getElementById("dish-{{$index}}");）の角度の補間を使用するようにしてください。これは動作しません。

クリックイベントをjQueryで登録する代わりに、ng-clickという角度指示を使用することができます。私はすべてのあなたの料理がjavascriptオブジェクトの配列に保存されていると仮定します。

<div ng-repeat="dish in dishes"> 
    <button class="order" ng-click="dish.modalVisible = true">Open Modal</button> 

    <div id="dish-{{$index}}" class="modal4"> 

     <!-- Modal content --> 
     <div class="modal-content4" ng-if="dish.visible"> 
     {{dish.dishName}} 

     <span class="close4" ng-click="dish.modalVisible = false">x</span> 
     </div> 
</div> 

ng-ifは、条件が真値と評価されたときに、その要素のHTMLをDOMに挿入します。最初のng-clickの助けを借りて、modalVisibleプロパティをtrueに設定しました。モーダルはレンダリングされます。閉じるボタンをクリックすると、modalVisibleがfalseに設定され、DOMからモーダルが削除されます。また、ng-ifの代わりにng-showを使用することもできます。これは要素を隠すだけですが、DOMに残っています。

あなたは、角度サイト上のドキュメントになります：

• ng-click
• ng-if