填充角度ui引导程序弹出窗口 [英] Populate angular ui bootstrap popover

问题描述

如何填充角度ui引导程序弹出窗口？我想用演员名称列表填充弹出窗口。这是代码：

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>

我希望能够为每个ng-repeat名称填充此弹出窗口。因此，我将获得电影的名称，并基于该名称，我想用该电影中的演员列表填充弹出窗口。谢谢大家。

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.

推荐答案

这绝对有可能。
我已经在JS中设置了一个名为朋友的数据项

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'];

如果要为每行显示一个弹出窗口

我创建了ng-repeat和相关的弹出框。为了显示所有字母

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?

您的工具提示值设置为 uib-tooltip = {{toolTip [$ index]}}} 。它根据从ng-repeat获得的$ index访问每个元素。

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

想要在第一个弹出窗口中显示所有数据

我已经创建了ng-repeat和相关的弹出窗口。以便在第一个弹出窗口中显示所有字母。

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?

您的工具提示值设置为 uib-tooltip = {{toolTip}} 。如果满足条件，则输入ng-if，从而打印数组。

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.

这篇关于填充角度ui引导程序弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！