我正在使用 ng-options 来迭代选择框中的选项，下面是我的代码..
<select id="multiSelectAvailable" ng-model="selected.available" multiple
ng-options="e as e[displayAttr] for e in available"></select>
如何在选项上悬停时显示 displayAttr 的工具提示？
【问题讨论】：
我遇到了类似的问题，我在我的角度控制器中使用 jquery 以一种简单的方法解决了。
JS 文件
scope.addToolTip = function(){
$(#multiSelectAvailable option).each(function(i){
if(i>0){
var title = $(this).text();
$(this).attr('title',title);
}
});
}
HTML
<select id="multiSelectAvailable" ng-model="selected.available" ng-options="e as e[displayAttr] for e in available" ng-mouseover="addToolTip()"></select>
注意： addToolTip() 方法也可以使用简单的java脚本代码来调制dom。
【讨论】：
HTML 代码：
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
</script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<button popover-placement="{{placement.selected}}" uib-popover="On the
{{placement.selected}}" type="button" class="btn btn-default">Popover</button>
</div>
</body>
</html>
Angular JS 代码：
angular.module('myApp', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.placement = {
options: [
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom'
],
selected: 'right'
};
});
【讨论】：
选择选项的工具提示可以通过 jquery 工具提示来实现。
编辑：
有一个自定义指令。
angular.module('ui.bootstrap.demo').directive('myDirec', ['$log', '$templateCache', '$compile', function($log, $templateCache, $compile) {
return {
restrict: 'A',
priority: 1000,
link: function(scope, element, attr) {
element.children().attr('data-toggle', 'tooltip');
element.children().attr('data-placement', 'tooltip');
element.children().attr('title', 'hello tool tip');
$compile(element)(scope);
},
};
}]);
和
<select my-direc ng-model="select" multiple data-toggle="tooltip" data-placement="top" title="{{e.toolTip}}"
ng-options="e as e.tableName for e in data"></select>
同样更新了 Plunker link。
试试这个，
在 app.js 中，
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
$scope.dynamicTooltip = 'Hello, World!';
$scope.dynamicTooltipText = 'dynamic';
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
$scope.data = [{
id: 1,
tableName: 'table1',
toolTip:'tool tip 1'
}, {
id: 2,
tableName: 'table2',
toolTip:'tool tip 2'
}, {
id: 3,
tableName: 'table3',
toolTip:'tool tip 3'
}];
});
angular.module('ui.bootstrap.demo').directive('myDirec', ['$log',
'$templateCache', '$compile', function($log, $templateCache, $compile) {
return {
restrict: 'A',
priority: 1000,
link: function(scope, element, attr) {
element.children().attr('data-toggle', 'tooltip');
element.children().attr('data-placement', 'tooltip');
element.children().attr('title', 'hello tool tip');
$compile(element)(scope);
},
};
}]);
在 HTML 中，
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body ng-controller="TooltipDemoCtrl">
<select ng-model="select" >
<option data-toggle="tooltip" data-placement="top" title="{{item.toolTip}}" ng-repeat="item in data">{{item.tableName}}</option>
</select>
</body>
</html>
希望这会有所帮助。 :)
【讨论】：