提示Angulerjs中ng-options生成的选择框选项悬停工具提示 [英] Tooltip on Hover of select box options generated by ng-options in Angulerjs

问题描述

 < select 
 
我使用ng选项来迭代选择框中的选项，以下是我的代码。 id =multiSelectAvailableng-model =selected.availablemultiple 
 ng-options =e as e [displayAttr] for e in available>< / select> 
  

我想在悬停选项时显示displayAttr的工具提示。
任何指针？ ？

解决方案

编辑：

有一个自定义指令。

  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 =selectmultiple data-toggle =tooltipdata-placement =toptitle ={{e.toolTip}}
 ng-options =e as e.tableName for e in data>< / select> 
  

更新的Plunker 链接为相同。

试试这个，

在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（'我做过< b>粗体< / 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'
}]; 
}）; 
 $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' ，$ compile）{
 return {
 restrict：'A'，
 priority：1000，
 
 link：function（scope，element，attr）{
 element.children（）。attr（'data-toggle'，'tooltip'）; 
 element.children（）。attr（'data-placement'，'tooltip'）; 
元素。 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&&&;;lt;/script> 
< script src =example.js>< / script> 
< link href =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css =stylesheet> 
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css> 
 
 
< / head> 
< body ng-controller =TooltipDemoCtrl> 
 
< select ng-model =select> 
< option data-toggle =tooltipdata-placement =toptitle ={{item.toolTip}}ng-repeat =item in data> {{item.tableName}} < /选项> 
< / select> 
 
< / body> 
< / html> 
  

希望这会有所帮助。 ：）

i am using ng-options to iterate options in select box , Here is my code below ..

<select id="multiSelectAvailable" ng-model="selected.available" multiple 
        ng-options="e as e[displayAttr] for e in available"></select>

I want to show a tooltip of displayAttr when hover on options.. Any pointers ??

解决方案

Tool tip over select options is possible through jquery tooltip.

Edit :

have a custom directive.

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);
    },
  };
}]);

and

<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>

Updated Plunker link for the same.

Try this,

In 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);
    },
  };
}]);

In 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>

Hope this helps. :)

这篇关于提示Angulerjs中ng-options生成的选择框选项悬停工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！