Question

我正在使用ng-repeat在我的网站上列出一堆菜肴帖子，我想在点击它时打开一个模态（这个模式可以访问该菜的数据）。要做到这一点，我试图给每个菜一个模态div与自己的id（dish- $ index），然后将模式的样式从display：none更改为：block。出于某种原因，我无法在我的javascript（它返回null）中通过Id菜单获取元素 - {{$ index}}。为什么这不起作用或者更好的方法是什么？我不想使用bootstrap。

        <!-- 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}}");）中使用角度插值。这不行。

您可以使用angular指令ng-click而不是使用jQuery注册一个on-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。模态得到渲染。单击关闭按钮上的ng-click将modalVisible设置为false，并将模态从DOM中删除。您也可以使用ng-show而不是ng-if。这只隐藏元素但保留在DOM中。

您可以查看角度网站上的文档：

如何在ng-repeat中更改特定项目的样式？

1 个答案: