关于ng-repeat的AngularJS工具提示

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

那是因为您在整个范围内使用相同的演示对象。

将demo作为属性添加到每个容器对象并使用相关的对象。

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

在页面中：

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