如何在angularjs中悬停显示文本？

Posted 2023-03-06

【中文标题】如何在angularjs中悬停显示文本？

【英文标题】：How to display text in hover over in angularjs?

【发布时间】：2015-05-09 14:11:03

【问题描述】：

我对 AngularJS 很陌生。当鼠标悬停在值上时，我想显示Project.inrtcvalue。如何在 AngularJS 中做到这一点？

<table ng-table="tableParams" show-filter="true" class="table" >
    <tr  ng-class="'danger': project.rag <= 35, 'warning': project.rag > 35 && project.rag < 70  , 'success': project.rag > 70" ng-repeat="project in $data">
        <td data-title="'PRN'" sortable="'prn'" filter="'prn': 'text'">
            project.prn
        </td>
    </tr>
</table>

因此，当用户将鼠标悬停在这些 <td> 上时，我想显示来自控制器的值。我该怎么做呢？最好的方法是什么？

【问题讨论】：

你想在哪里展示它？

就像您将鼠标悬停在一个框（

）上一样，当用户将鼠标悬停在 上时，我想要一个显示值的小气泡

Dylan Watson 给了你最简单最有效的答案。

有一个问题，它没有打印值，它只是按原样打印表达式：project.inrtcvalue

【参考方案1】：

您应该能够在 html 标题标签中使用 variable 表示法。

比如：

<td title="project.inrtcvalue">

请参阅此plunkr 以获取示例（感谢dfsq）

【讨论】：

当您将鼠标悬停在元素（在本例中为 td 元素）时，html 'title' 属性将显示文本

这是打印 project.inrtcvalue，而不是实际值

有趣.. 您的 ng-repeat 是否正确显示表中的值？

这是它的工作演示（第一列）：plnkr.co/edit/RQOTmteiJ86ZjENEzE1p?p=info

@maaartinus 脚本路径已损坏。 plnkr.co/edit/upuGp6iosXqLdaAi3kX5?p=preview

【参考方案2】：

您可以使用ng-mouseover 和ng-show 指令来完成此操作。以下是示例。 Example 。希望对您有所帮助。

【讨论】：

如果我按照这个例子，我将如何显示显示悬停文本的气泡？