CODEWITHSUNDEEP
angularjsangular-ui-bootstrappopoverangularjs-ng-repeat
Zauker
Zauker

Reputation: 2394

add conditionally an Angular Bootstrap popover inside an ng-repeat

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?

Upvotes: 5

Views: 5553

Answers (2)

Dylan K
Dylan K

Reputation: 71

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;
  }
}

Upvotes: 1

Joy
Joy

Reputation: 9560

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>

Upvotes: 10

Related Questions