add conditionally an Angular Bootstrap popover inside an ng-repeat

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>