Click here to Skip to main content
15,881,898 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Hi,

I have a simple <table> with an ng-repeat row. Some of the values are quite long so I trim them with an ellipses (...).

I need to show a tooltip or popover for the cells which have the ellipses. I can test the element fairly easily:
JavaScript
this.hasEllipsis = function(element) {
    return (element.offsetWidth < element.scrollWidth);
}
Question:How can I use this to only show the full text if this returns true?

I tried checking the popover text but I can't seem to pass the element to the function:
JavaScript
<td popover="{{ getPopoverText(???) }}" popover-placement="right" popover-trigger="mouseenter">
I tried 'this': it was the item in ng-repeat. I tried '$event': undefined. They're prolly silly things to try, but I'm quite simple minded :P

Any suggestions are welcome ^_^
Thanks
Andy
Posted
Comments
Nathan Minier 29-Oct-15 8:59am    
Are you using Angular UI-Bootstrap, or bootstrap.js?
Andy Lanng 29-Oct-15 9:13am    
Angular UI-Bootstrap for this.

1 solution

First a minor note, the current version of UI-Bootstrap has changed the directive names. There is some backwards compatibility, but I've had issues just porting code over. The current directive name is uib-popover, not popover (the trigger and placement are still the same).

A directive runs in its own scope and while it will take objects, generally directive scopes have issues with functions (variables not at $rootScope, etc). You'd be better served by changing the data model a little, and having an element.fullText and a function for element.displayText.

The truly half-baked version goes something like this:

JavaScript
$scope.DisplayText = function(element){
   if(hasEllipsis (element)){       
      return niceparsemethodhere; // text parsed as ellided content
   }
   return element.fullText;
}


Then you pass $scope.element.fullText to the uib-popover directive.

HTML
<td ng-repeat="item in myarray">{{DisplayText(item)}}
   <span ng-if="hasEllipsis(item)" uib-popover="item.fullText" popover-placement="right" popover-trigger="mouseenter">...</span>
</td>


You can re-purpose this to model methods, but this is a fair rough draft.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900