在 ng-repeat 中有条件地添加 Angular Bootstrap 弹出框答案

【问题标题】：add conditionally an Angular Bootstrap popover inside an ng-repeat在 ng-repeat 中有条件地添加 Angular Bootstrap 弹出框
【发布时间】：2015-10-19 03:08:51
【问题描述】：

我将 AngularJS 与 Angular UI Bootstrap 一起使用。

在我的模板中，我需要显示一个表格，我使用 ng-repeat 创建它，我需要为某些单元格添加点击弹出框。

我做了这样的例子： popover example inside ng-repeat in plunker

如何有条件地仅在某些单元格中具有弹出框的更好方法？

【问题讨论】：

标签： angularjs angular-ui-bootstrap popover ng-repeat

【解决方案1】：

查看工作演示：Plunker。只有带有value > 5.0 的单元格会显示弹出框（绿色背景）。

在$scope上定义一个函数：

$scope.filterCells = function (v) {
    return v > 5.0 ? 'mouseenter' : 'none';
};

还有td HTML：

<td data-ng-repeat="v in getRowData(row)" class="zscore" 
    ng-class="{'show-popup': filterCells(v)}" popover="{{zscores[row][$index]}}" 
    popover-trigger="{{ filterCells(v) }}" 
    popover-append-to-body="true" popover-title="zScore">
    {{ v | number:1 }}
</td>

【讨论】：

是一个很好的解决方案，但是有一个奇怪的行为。值 > 5.0 的单元格将在 mouseenter 上显示弹出框，但其他单元格也会在单击时显示弹出框。我可以避免在点击未允许的单元格时打开弹出框？

【解决方案2】：

Angular 8.2.0 + ng-bootstrap 和 Ngb Popover 指令

我在尝试解决我的问题时遇到了这个问题，所以我将我的解决方案包括在这里。

我在使用triggers 属性有条件地显示/隐藏弹出框时遇到了问题。事实证明，triggers 的值被ngOnInit 中的弹出框所消耗，因此在组件已经初始化后它不会显示/隐藏弹出框。

我发现ngbPopover 有一个名为disablePopover 的属性可以完成我需要的操作，而不是使用triggers。

https://ng-bootstrap.github.io/#/components/popover/api

之前

HTML

<div
  ngbPopover="Hello, World!"
  [triggers]="triggers">
</div>

打字稿

private readonly TRIGGERS_ENABLED = 'mouseenter:mouseleave';
private readonly TRIGGERS_DISABLED = 'none';
public triggers = TRIGGERS_DISABLED;

someEvent() {
  if (someConditional) {
    this.triggers = TRIGGERS_DISABLED;
  } else {
    this.triggers = TRIGGERS_ENABLED;
  }
}

之后

HTML

<div
  ngbPopover="Hello, World!"
  triggers="mouseenter:mouseleave"
  [disablePopover]="disablePopover">
</div>

打字稿

public disablePopover = true;

someEvent() {
  if (someConditional) {
    this.disablePopover = false;
  } else {
    this.disablePopover = true;
  }
}

【讨论】：