AngularJS 도움말 - ng-repeat

Question

AngularJS에 대한 "도구 설명"을 표시하는 데 도움이 필요합니다. 문제는 내가 테이블에 ng-repeat을 가지고 있고 어떤 행에 나는 풍선 도움말 위에 툴팁을 보여줄 것으로 보여지는 버튼을 보여주고있다.

툴팁이 보이지만 문제는 하나의 행에 마우스를 가져 가면 툴팁이 모든 행에 대해 표시된다는 것입니다. 이미지를 설명하기 위해 더 잘 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' 
      }} 
      ); 

그리고

페이지에서 :

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