Angular UI table 中的弹出窗口（ng-repeat）。使用 popover-is-open，如何防止所有弹出窗口打开？

Question

我有一个 table，其中有很多弹出窗口，使用 ng-repeat。代码如下所示：

     <td>
       <button uib-popover-template="dynamicPopover.templateUrl" type="button" class="btn btn-primary" popover-placement="left" popover-is-open="myPopover.isOpen" ng-click="myPopover.open()">Examples</button>
     </td>

在我的控制器中我有这个：

    $scope.myPopover = {

    isOpen: false,

    open: function open() {
        $scope.myPopover.isOpen = true;
    },

    close: function close() {
        $scope.myPopover.isOpen = false;
    }
};

当我现在按下 "Examples" 按钮时，我会打开 table 中的所有弹出窗口。我怎样才能防止这种情况发生并且只有 open/close 弹出窗口附加到我按下的按钮？

Answer 1

如果我没猜错，请尝试将 table 放入表单标签并提供此代码

<form ng-submit="$event.preventDefault()">

Answer 2

这是因为您将 popover-is-open="" 绑定到所有弹出框的相同 属性。

试试 popover-is-open="isPopoverOpen" ng-click="isPopoverOpen = !isPopoverOpen"

在那里，您将为每 scope/per 行创建一个变量 isPopoverOpen。

Answer 3

假设您的 ng-repeat 正在循环 item in items track by $index，您必须为 item.

更改 isOpen 属性

应该是这样的（还没来得及测试）

<button uib-popover-template="dynamicPopover.templateUrl" type="button" class="btn btn-primary" popover-placement="left" popover-is-open="item.isOpen" ng-click="openPopover($index)">Examples</button>

然后是

function openPopover(i){
  $scope.items[i].isOpen = true;
}