如何更改ng-repeat中特定項目的樣式？

我正在使用ng-repeat在我的網站上列出一系列菜餚發佈內容，當我點擊它時（這種模式將訪問該菜餚的數據），我想打開一個模式。要做到這一點，我試圖給每個菜與自己的ID（dish- $索引）模式的股利，然後改變模式的風格從顯示：無到顯示：塊。出於某種原因，我無法通過Id菜單{{$ index}}在我的javascript中獲取元素（它返回null）。爲什麼不這樣做或者什麼是更好的方法來做到這一點？我不想使用引導程序。如何更改ng-repeat中特定項目的樣式？

 <!-- 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"; 
       });

來源

2016-08-22 Paul Bridi

喲可以添加任何小提琴/ Plnkr？ –

一個可能的原因可能是$ index不在你的java腳本範圍內。 –

您嘗試使用JavaScript中的角插補（document.getElementById("dish-{{$index}}");）。這不起作用。

而不是使用jQuery註冊點擊事件，您可以使用angular指令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-如果插入元件的HTML才把到DOM當條件評估爲真值。在第一個ng-click的幫助下，我們將modalVisible屬性設置爲true。模態被渲染。 ng鍵點擊關閉按鈕將modalVisible設置爲false，並將模式從DOM中移除。你也可以用ng-show代替ng-if。這隻隱藏了元素，但保留在DOM中。

你可以看看對角站點上的文檔：

來源

2016-08-22 08:22:21

如何更改ng-repeat中特定項目的樣式？

回答

相關問題