
本文介绍了填充 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'];
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
Your tool tip value is set as uib-tooltip="{{toolTip[$index]}}"
.it accesses each element according to the $index obtained from 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
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!