填充 angular ui bootstrap popover [英] Populate angular ui bootstrap popover

问题描述

你如何填充一个有角度的 ui bootstrap popover?我想用演员姓名列表填充弹出框.代码如下:

<p>播放的电影:</p><table class="table table-bordered"><tr ng-repeat="电影列表中的名字"><td><p><button uib-popover="populateWithListOfData" popover-trigger="mouseenter" type="button" class="btn btn-default">{{名称}}</button></p></td></tr>

我希望能够为 ng-repeat 的每个名称填充此弹出框.所以我会得到一个电影的名字，并根据这个名字我想用那部电影中的演员列表填充弹出框.谢谢各位.

解决方案

这绝对是可能的.我在 JS 中设置了一个叫做朋友的数据项

$scope.friends = [{名称:'约翰'}，{name:'Jessie'},{名称:'约翰娜'}，{名称:'欢乐'}];

此外，还为弹出窗口中的文本创建了一个数组

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

<块引用>

如果您想为每一行显示一个弹出窗口.

我已经创建了 ng-repeat 和相关的 popover.为了在第一个 popover 中显示所有字母.

{{f.name}}<button uib-tooltip="{{toolTip[$index]}}" type="button" class="btn btn-default">工具提示{{placement.selected}}</button>

这是一个工作演示

<块引用>

它是如何工作的?

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

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

我已经创建了 ng-repeat 和相关的 popover.为了在第一个 popover 中显示所有字母.

 
<div ng-if="$index==0"><button uib-tooltip="{{toolTip}}" type="button" class="btn btn-default">工具提示{{placement.selected}}</button>
{{f.name}}

这是一个工作演示

<块引用>

它是如何工作的?

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

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.

解决方案

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.

这篇关于填充 angular ui bootstrap popover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！