angularjs ng-repeat中的工具提示？答案

【问题标题】：Tooltip in angularjs ng-repeat?angularjs ng-repeat中的工具提示？
【发布时间】：2016-09-03 09:15:30
【问题描述】：

我试图在第一个 TD 的每个元素的顶部显示一个提示。但是由于它在 ng-repeat 中，因此出现了许多工具提示（设计不佳）。如何在我悬停的 td 顶部显示它？我不能在这个上使用角度 UI。请帮帮我。谢谢！

http://plnkr.co/edit/UJ8UDaTHaACZwX7uw5B8?p=info

    <tr ng-repeat="friend in friends">
        <td ng-mouseover="positive()" ng-mouseleave="negative()">{{friend.name}}
      <hover ng-show="showHover"></hover>
        </td>
        <td>{{friend.age}}</td>
        <td>{{friend.gender}}</td>
    </tr>

【问题讨论】：

标签： javascript css angularjs angularjs-ng-repeat

【解决方案1】：

我建议您使用所有 html 元素都可用的 title 属性。从可访问性的角度来看，这很好。

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">

    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
        <tr ng-repeat="friend in friends">
            <td ng-mouseover="positive()" ng-mouseleave="negative()" title="{{tooltipText}} - {{friend.name}}">
                {{friend.name}}
            </td>
            <td>{{friend.age}}</td>
            <td>{{friend.gender}}</td>
        </tr>
    </table>
</body>

</html>

如果您需要设置工具提示的样式，请检查此链接是否有帮助。

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

【讨论】：

【解决方案2】：

您只需要为每个工具提示设置一个唯一的名称，在这种情况下，您可以使用名称或 $index：

HTML：

<tr ng-repeat="friend in friends">
    <td ng-mouseover="positive(friend.name)" ng-mouseleave="negative(friend.name)">
        {{friend.name}}
        <hover ng-show="showHover[friend.name]"></hover>
    </td>
    <td>{{friend.age}}</td>
    <td>{{friend.gender}}</td>
</tr>

JS：

$scope.showHover = {};

$scope.positive = function(name) {

    $scope.showHover[name] = true;

    if (name.indexOf('*') > -1) {
        $scope.tooltipText = "Changed value";
    }
    if (name.indexOf('-') > -1) {
        $scope.tooltipText = "No Data"          
    } else {
        $scope.tooltipText = "Original value";
    }
}

$scope.negative = function(name) {
    $scope.showHover[name] = false;
}

【讨论】：