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

Question

我对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>上时，我想显示控制器中的一个值。我该怎么做？最好的方法是什么？

- butYouDontLookLikeADeveloper

---

你想在哪里展示它？ - dfsq

就像您悬停在一个框（<td>）上一样，我希望当用户悬停在<td>上时显示一个小气泡来显示值。 - butYouDontLookLikeADeveloper

Dylan Watson 给出了最简单和最有效的答案，告诉你如何做到这一点。 - dfsq

有一个问题，它没有打印出值，只是按原样打印表达式：{{project.inrtcvalue}}。 - butYouDontLookLikeADeveloper

Answer 1

您只需要在HTML标题标签中使用{{variable}}表示法即可。

因此，可以像这样：

<td title="{{project.inrtcvalue}}">

请参考此plunkr示例（感谢dfsq）

- Dylan Watson

---

HTML的“title”属性将在将鼠标悬停在元素上时显示文本（在此情况下为td元素）。 - Dylan Watson

这将打印{{project.inrtcvalue}}，而不是实际值。 - butYouDontLookLikeADeveloper

有趣... 你的ng-repeat是否正确显示了表格中的值？ - Dylan Watson

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

@dfsq它显示{{user.name}}。 我猜自那时以来有些事情发生了。 FTR ng-attr-title有效。 - maaartinus

@maaartinus 脚本路径已损坏。http://plnkr.co/edit/upuGp6IoSXqLdaAi3kX5?p=preview - dfsq

Answer 2

您可以使用ng-mouseover和ng-show指令来实现此功能。以下是示例。示例。希望这能帮助您入门。

- Kamran

---

如果我按照那个例子，如何在悬停时显示显示文本的气泡？ - butYouDontLookLikeADeveloper