Populate angular ui bootstrap popover

Question

How do you populate an angular ui bootstrap popover? I want to populate the popover with a list of actor names. Here is the code:

<div class="container" ng-if="radioModel=='Search for Actor'">
    <p>Movies played in:</p>
      <table class="table table-bordered">
        <tr ng-repeat="name in listOfMovies">
        <td>
        <p>
          <button uib-popover="populateWithListOfData" popover-trigger="mouseenter" type="button" class="btn btn-default"> {{ name }}</button>
        </p>   
       </td>
       </tr>
     </table>
 </div>

I want to be able to populate this popover for each name of the ng-repeat. So I will get a name of a movie and based on that name I want to populate the popover with a list of actors in that movie. Thanks guys.

Where it says uib-popover="populateWithListOfData" I do not know how to populate the popover. I just put populateWithListOfData as a placeholder. — sebenalern
– sebenalern, Commented Apr 6, 2016 at 5:40
This is a good place to make a directive since in this case you've to return html based on the name of the movie. — Bettimms
– Bettimms, Commented Apr 6, 2016 at 5:45
Okay, but if I have my list of data is there a way to run a loop on the popover to populate it? I have never really created a directive because I am new to angular. — sebenalern
– sebenalern, Commented Apr 6, 2016 at 5:48
I've used something like this in the past plnkr.co/edit/ujp5AGHmMSCBn2ZXbc1S?p=preview . I understand you want to iterate through that data? — Satej S
– Satej S, Commented Apr 6, 2016 at 5:51

Satej S · Accepted Answer · 2016-04-06 06:17:09Z

1

This is definitely possible. I have setup a data item called friends in JS

$scope.friends = [
    {name:'John'},
    {name:'Jessie'},
    {name:'Johanna'},
    {name:'Joy'}
      ];

Also , an array was created for the text in the popup

$scope.toolTip =['D','A','C','T'];

If you want to display a pop up for each row.

I've created the ng-repeat and the relevant popover.In order to display all the letters in the first popover.

<div ng-repeat="f in friends">
{{f.name}}
<button  uib-tooltip="{{toolTip[$index]}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
</div>

Here is a working demo

How does it works?

Your tool tip value is set as uib-tooltip="{{toolTip[$index]}}".it accesses each element according to the $index obtained from ng-repeat.

If you want to display all the data in the first pop up

I've created the ng-repeat and the relevant popover.In order to display all the letters in the first popover.

   <div ng-repeat="f in friends">
   <div ng-if="$index==0">
   <button  uib-tooltip="{{toolTip}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
</div>
   {{f.name}}
   </div>

Here is a working demo

How does it works?

Your tool tip value is set as uib-tooltip="{{toolTip}}".It enters the ng-if , if the condition is met, and thus prints the array.

edited Apr 6, 2016 at 6:17

answered Apr 6, 2016 at 6:02

Satej S

2,1541 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sebenalern Over a year ago

But see in the demo each letter is on a different popover, What I need is all the letters displayed on the first popover.

Satej S Over a year ago

That's pretty simple too.What does your list of data look like?

Satej S Over a year ago

@sebenalern, something like this? Link

sebenalern Over a year ago

I removed the [$index] and it displays all the data on each popover. Accept my edit and I will accept your answer. Thanks for the help!

Satej S Over a year ago

@sebenalern, I think I lost the edit while adding a link myself

Bettimms · Accepted Answer · 2016-04-06 06:13:11Z

I couldn't test if it works, but this might give you the idea.

(function ()
{
    function moviePopover($compile)
    {
        return {
            restrict: "EA",
            scope: true,
            templateUrl: '<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>',
            link: function (scope, element, attrs)
            {
                scope.dynamicPopover = {
                    content: "Movies",
                    templateUrl: "myPopoverTemplate.html",
                    title: "Title"
                };

                if (attrs.movieName !== undefined)
                {
                    scope.movieList = getMoviesByName(attrs.movieName);
                    $compile(element)(scope);
                    //If 1st leads to infinit loop use this
                    //                    $compile(element.contents())(scope);
                }

                function getMoviesByName(movieName)
                {
                    //return all moviews based on movieName
                    //here im just returning dummy array(you return your data)
                    return ["Movie1", "Movie2"];
                }
            }
        }
    }

    angular.module("myApp").directive("moviePopover", ["$compile", moviePopover]);


}());

<script type="text/ng-template" id="myPopoverTemplate.html">
  <ul>
        <li ng-repeat="movie in movieList">{{movie}}</li>
  </ul>
</script>


<div class="container" ng-if="radioModel=='Search for Actor'">
    <p>Movies played in:</p>
      <table class="table table-bordered">
        <tr ng-repeat="name in listOfMovies">
        <td>
        <p>
          <movie-popover movie-name="{{name}}"></movie-popover>
        </p>   
       </td>
       </tr>
     </table>
 </div>

Thank you for your answer. I think this will help me in the future also.

Collectives™ on Stack Overflow

Populate angular ui bootstrap popover

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related