add conditionally an Angular Bootstrap popover inside an ng-repeat - angularjs

Question

I'm using AngularJS with Angular UI Bootstrap.
In my template i need to show a table, i create it with an ng-repeat, I need to add a popover on click only for certain cells.
I made something like this example:
popover example inside ng-repeat in plunker
How is the better way to have the popover conditionally only in certain cells?

Answer 1

Check the working demo: Plunker. Only the cell with value > 5.0 will show popover (in green background color).
Define a function on the $scope:
$scope.filterCells = function (v) {
return v > 5.0 ? 'mouseenter' : 'none';
};
And the 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 and the Ngb Popover directive
I came across this question while trying to fix my issue, so I'm including my solution here.
I had an issue using the triggers property to conditionally show/hide popovers. It turns out that the triggers value is consumed by the popover in ngOnInit, so it does not show/hide the popover after the component is already initialized.
I found that ngbPopover has a property called disablePopover that accomplishes what I need instead of using triggers.
https://ng-bootstrap.github.io/#/components/popover/api
Before
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;
}
}
After
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;
}
}