Question

我正在使用AngularJS和Angular UI Bootstrap。

在我的模板中，我需要显示一个表格，我使用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属性有条件地显示/隐藏弹出窗口时出现问题。事实证明triggers的值由ngOnInit中的弹出窗口消耗，因此在初始化组件之后，它不会显示/隐藏弹出窗口。

我发现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 popover

2 个答案: