AngularJS - bootstrap popover，如何在 ng-repeat 中正确使用“popover-is-open”

debugcn 发表于 Dev

AJ989

我有一个 ng-repeat，它在表中生成一个项目列表，每个项目在其行中有一个按钮，并且该按钮打开一个弹出窗口（以编辑对象）。

重要的是我不使用：click-outside引导弹出窗口的属性，因为此弹出窗口必须仅使用其中的按钮关闭。

所以在<div>具有 ng-repeat的 popover 声明的 html 代码中，我们有以下代码：

         <div class="popoverX" popover-class="popoverCustom" 
    popover-append-to-body="true" popover-placement="bottom-left"
         popover-is-open="vm.isEditPopoverOpen" 
uib-popover-template="'Views/xxx/popTemplate.htm'">

在控制器中，这是定义的：

 isEditPopoverOpen: boolean;

和我们在弹出窗口中的关闭函数，关闭它，是：

   closePopover() {
      this.loading = false;
      this.isEditPopoverOpen= false;      
    }

所以当我们在 ng-repeat 中只返回一个项目时，一切都很好，但情况并非如此，所以目前，当您单击div打开弹出框的行时，每行的每个弹出框都会打开。

我明白为什么会发生这种情况，因为我使用的是相同的布尔值，但是解决方案是什么？

我需要保留此结构，因此必须仅使用按钮关闭弹出窗口，并且我想避免在 ng-repeat 中循环的数组中的对象上添加新属性，例如 : isOpened: boolean，然后将其用于打开/关闭。

如果有任何其他解决方案，我会很高兴听到他们的声音！

汤姆约翰逊

如果你真的不想在你的对象上分配新的属性，你可以像这样保留一个单独的打开/关闭弹出框数组；

vm.openedPopovers = [];

在您的标记中，您可以$index像这样在中继器中访问；

<div class="popoverX" popover-class="popoverCustom" 
     popover-append-to-body="true" popover-placement="bottom-left"
     popover-is-open="vm.openedPopovers[$index]" 
     uib-popover-template="'Views/xxx/popTemplate.htm'">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。