javascript - 填充 Angular 用户界面 Bootstrap 弹出窗口

Question

如何填充 Angular 用户界面 Bootstrap 弹出窗口？我想用 Actor 姓名列表填充弹出窗口。这是代码:

<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 的每个名称填充此弹出窗口。因此，我将获得一部电影的名称，并根据该名称在弹出窗口中填充该电影中的 Actor 列表。谢谢大家。

Answer 1

这绝对是可能的。 我在 JS 中设置了一个名为 friends 的数据项

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

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

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

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

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

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

这是一个 working demo

How does it works?

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

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

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

   <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>

这是一个 working demo

How does it works?

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