AngularJS

Question

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

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

所以在 html 代码中，弹出窗口在具有 ng-repeat 的 <div> 上声明，我们有以下代码：

         <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，然后将其用于 open/close .

如果有任何其他解决方案，我很乐意听取他们的意见！

Answer 1

如果您真的不想为您的对象分配新属性，您可以像这样保留一个单独的 opened/closed 弹出窗口数组；

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'">

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

AngularJS - bootstrap popover, how to use correctly "popover-is-open" in a ng-repeat

twitter-bootstrap

popover