angularjs中的工具提示ng-repeat
Tooltip in angularjs ng-repeat?
我试图在第一个TD上的每个元素的顶部显示一个工具提示。但由于它是在ng-repeat中,许多工具提示(设计糟糕)出现了。我怎么能把它显示在我悬停的td的顶部呢?我不能在这上面使用angular 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>
我建议您使用所有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/您只需要为每个工具提示提供一个唯一的名称,在这种情况下,您可以使用名称或$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;
}
相关文章:
- ng init中的表达式无法使用ng repeat
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- Angular ng repeat order将多个字段作为一个字段
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 访问ng repeat中的第一个项目
- Angular js+ng repeat+字母数字索引不起作用
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何正确应用Angularjs ng repeat
- Angular Highcharts ng如何将其他数据系列设置为工具提示
- 在使用ng repeat和limit to时,jQuery中的上下文出现错误,并从tether.js获得工具提示
- 在工具提示中使用ng单击
- 如何确定ng-grid中用于工具提示显示的行索引
- angularjs中的工具提示ng-repeat
- 只有当复选框禁用ng (angular)时才显示工具提示