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

Question

我正在使用 ng-repeat 在我的网站上列出一堆菜品帖子，我想在单击它时打开一个模态(这个模态将可以访问该菜的数据)。为此，我尝试为每道菜提供一个具有自己 ID (dish-$index) 的模态 div，然后将模态的样式从 display:none 更改为 display: block。出于某种原因，我无法在我的 javascript 中通过 Id dish-{{$index}} 获取元素(它返回 null)。为什么这不起作用或更好的方法是什么？我不想使用 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 中使用 Angular 插值 (document.getElementById("dish-{{$index}}");)。这是行不通的。

您可以使用 Angular Directive(指令) ng-click，而不是使用 jQuery 注册点击事件。我假设您所有的菜肴都保存在一个 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 中。

您可以查看 Angular 站点上的文档:

• ng-click
• ng-if