AngularJS ng-repeatのツールチップ

Question

AngularJSの「ツールチップ」を表示する際に助けが必要です。問題は、テーブルにng-repeatがあり、いくつかの行には、ホバー上にツールチップを表示するはずのボタンが表示されていることです。

ツールチップが表示されていますが、問題は、1つの行にカーソルを置いたときにツールチップがすべての行に表示されていることです。画像に説明するために、より良い、そのmabyは：

これは、コントローラでの私のコードです：

$scope.demo = { 
      showTooltip: false, 
      tipDirection: 'right' 
     }; 

し、必要に応じてこれが私のテーブルです：

<md-card ng-repeat="container in containers | toArray:false | filter:searchText.container.name"> 

    <md-toolbar> 
     <div class="md-toolbar-tools"> 
      <h3> 
       <span>{{container.account_name}}</span> 
      </h3> 
     </div> 
    </md-toolbar> 

    <md-card-title> 
     <table class="table"> 
      <thead> 
      <tr> 
       <th>AccountName</th> 
       <th>AccountID</th> 
       <th>ContainerID</th> 
       <th>ContainerName</th> 
       <th>Options</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td><a href="{{container.tagManagerUrl}}">{{container.account_name }}</a></td> 
       <td>{{ container.accountId }}</td> 
       <td>{{ container.containerId }}</td> 
       <td ng-if="!container.missing_live"><a href="/gui/tags/{{container.path}}">{{container.name}}</a></td> 
       <td ng-if="container.missing_live">{{container.name}} 


        <md-tooltip md-visible="demo.showTooltip">Missing Live Container</md-tooltip> 
        <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon> 


       </td> 




       <td> <md-button class="md-icon-button" aria-label="More"> 
        <ng-md-icon icon="more_vert"></ng-md-icon> 
       </md-button></td> 
      </tr> 
      </tbody> 
     </table> 
    </md-card-title> 
</md-card> 

はこれがありますテーブル内のツールチップの行：

<md-tooltip md-visible="demo.showTooltip">Missing Live Container</md-tooltip> 
        <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon> 

私の目標は、ユーザーがマウスを移動する際のツールチップだけを表示することです。テーブルのすべてではありません。ありがとう

Answer 1

showTooltipをコンテナオブジェクトに追加します。あなたはスコープ全体で同じデモのオブジェクトを使用しているためだ

<md-toolbar> 
    <div class="md-toolbar-tools"> 
     <h3> 
      <span>{{container.account_name}}</span> 
     </h3> 
    </div> 
</md-toolbar> 

<md-card-title> 
    <table class="table"> 
     <thead> 
     <tr> 
      <th>AccountName</th> 
      <th>AccountID</th> 
      <th>ContainerID</th> 
      <th>ContainerName</th> 
      <th>Options</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td><a href="{{container.tagManagerUrl}}">{{container.account_name }}</a></td> 
      <td>{{ container.accountId }}</td> 
      <td>{{ container.containerId }}</td> 
      <td ng-if="!container.missing_live"><a href="/gui/tags/{{container.path}}">{{container.name}}</a></td> 
      <td ng-if="container.missing_live">{{container.name}} 


       <md-tooltip md-visible="container.showTooltip">Missing Live Container</md-tooltip> 
       <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon> 


      </td> 




      <td> <md-button class="md-icon-button" aria-label="More"> 
       <ng-md-icon icon="more_vert"></ng-md-icon> 
      </md-button></td> 
     </tr> 
     </tbody> 
    </table> 
</md-card-title> 

Answer 2

。

デモをプロパティとしてすべてのコンテナオブジェクトに追加し、関連するオブジェクトを使用します。

$scope.containers.forEach(container => { container.demo = { 
       showTooltip: false, 
       tipDirection: 'right' 
      }} 
      ); 

とページ内：コンテナオブジェクトに `showTooltip`を追加

<md-tooltip md-visible="container.demo.showTooltip">Missing Live Container</md-tooltip>