角度uiブートストラップポップオーバーに移入

Question

角度uiブートストラップポップオーバーをどのように設定しますか？私は俳優の名前のリストをpopoverに入れたいと思う。コードは次のとおりです。

<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の名前ごとにこのポップアップを設定できます。だから私は映画の名前を取得し、その名前に基づいて、その映画の俳優のリストをPopoverに挿入したいと思います。みんなありがとう。

Answer 1

これは間違いなく可能です。 私は

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

また、配列は、ポップアップ内のテキストのために作成されたJSでセットアップデータ項目と呼ばれる友人を持っているあなたはそれぞれのポップアップを表示したい場合は

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

行。

最初のポップオーバーにすべての文字を表示するには、ng-repeatと関連するpopover.Inを作成しました。ここで

<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

のですか？ uib-tooltip="{{toolTip[$index]}}" .ITがNGリピートから得た$インデックスに従って各要素にアクセスするよう

あなたのツールチップの値が設定されています。

最初ポップアップ私はNGリピートと最初のすべての文字を表示するには、関連するpopover.Inオーダーを作成しました

内のすべてのデータを表示したい場合はポップオーバー。ここで

<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

のですか？

ツールチップの値は、uib-tooltip="{{toolTip}}"に設定されています。条件が満たされている場合、ng-ifに入り、配列を出力します。

Answer 2

動作しているかどうかテストできませんでしたが、これはあなたに考えを与えるかもしれません。

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