填充 Angular UI Bootstrap 弹出窗口

Question

填充 Angular UI Bootstrap 弹出窗口

javascriptangularjstwitter-bootstrapangular-ui-bootstrapbootstrap-popover

3

你如何填充angular ui bootstrap的弹出框？我想用演员名称列表填充弹出框。以下是代码：

<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中的每个名称填充此弹出层。因此，我将获得电影的名称，并根据该名称填充弹出层以显示该电影中的演员列表。谢谢大家。

- sebenalern

那么哪里出了问题？ - Satej S

在 uib-popover="populateWithListOfData" 这里，我不知道如何填充弹出框。我只是将 populateWithListOfData 作为占位符。 - sebenalern

这是一个很好的指令编写位置，因为在这种情况下，您需要根据电影名称返回基于HTML的内容。 - Bettimms

好的，但是如果我有我的数据列表，有没有一种方法可以在弹出窗口上运行循环以填充它？因为我刚开始学习Angular，所以我从来没有真正创建过指令。 - sebenalern

我以前用过类似这样的东西 http://plnkr.co/edit/ujp5AGHmMSCBn2ZXbc1S?p=preview 。我理解你想要遍历那些数据？ - Satej S

是的，你说得对，我想要遍历数据。我会看一下。 - sebenalern

2个回答

1

我无法测试它是否有效，但这可能会给你一个想法。

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

- Bettimms

谢谢你的回答。我觉得这对我将来也会有帮助。 - sebenalern

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Satej S · Accepted Answer

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

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

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

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

如果您想为每一行显示弹出窗口。我已经创建了ng-repeat和相关的popover。为了在第一个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>

这里有一个工作演示

它是如何工作的？

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

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

我创建了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>

这里有一个工作演示

它是如何工作的？

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