Not showing the repeated value on tooltip from ng-repeate

Question

I want to show users name on list on tooltip like: 'user1 and 5 others', when I hover over '5 others', It will show all 5 users name(user2, user3 ..) on tooltip. For this I am using Angular-bootstrap.

here is my code:

<div ng-repeat="c in classes">
   <span ng-if = 'c.users.length > 1'>
     <h2> {{c.users[0].name}}</h2>
     | &
     <a href="#" tooltip="<ul><li ng-repeat='u in c.users'>{{u.name}}</li></ul>"> 
        {{invention.newInventer.length-1}} Others  
    </a>
  </span>
</div>

It is showing full condition as a string(not showing user name). How can I get all users name on tooltip?

Answer 1

1 You should use tooltip-html-unsafe instead of tooltip attribute:

There are two versions of the tooltip: tooltip and tooltip-html-unsafe. The former takes text only and will escape any HTML provided. The latter takes whatever HTML is provided and displays it in a tooltip; it called "unsafe" because the HTML is not sanitized. The user is responsible for ensuring the content is safe to put into the DOM!

2 Replace you ng-repeat with custom function that will be executed each time and will create html for tooltip, like the following:

  $scope.getUsersList=function(users){
    var html=angular.element("<ul/>");
    angular.forEach(users,function(value){
      html.append("<li>"+value.name+"</li>");
    });
    return html.html();

  };

and html:

<a href="#" tooltip-placement="bottom" 
      tooltip-html-unsafe="{{getUsersList(users)}}">Check me out!</a>

Take a look at example in Plunker