关于ng-repeat

Question

我需要一些帮助才能显示＆＃34;工具提示＆＃34;对于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

将sudo yarn global add tslint typescript 添加到容器对象中。

showTooltip

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>