在 ng-repeat 中有条件地添加 Angular Bootstrap 弹出窗口

Question

我正在使用 AngularJS 和 Angular UI Bootstrap。

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

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

仅在某些单元格中有条件地使用弹出窗口的更好方法是什么？

Answer 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>

Answer 2

Angular 8.2.0 + ng-bootstrap 和 Ngb Popover 指令

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

我在使用 triggers 属性有条件地 show/hide 弹出窗口时遇到问题。原来triggers值被ngOnInit中的popover消耗了，所以它不会show/hide组件已经初始化后的popover。

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

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

之前

HTML

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

TypeScript

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>

TypeScript

public disablePopover = true;

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

在 ng-repeat 中有条件地添加 Angular Bootstrap 弹出窗口

add conditionally an Angular Bootstrap popover inside an ng-repeat

popover

angularjs

ng-repeat

angular-ui-bootstrap