Question

我正在使用ng-options来迭代选择框中的选项，下面是我的代码..

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

如何在悬停在选项上时显示displayAttr的工具提示？

Answer 1

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

希望这会有所帮助。：）

Answer 2

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'
};

});

Answer 3

我遇到了类似的问题，我使用角度控制器内部的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>

注意：还可以使用简单的Java脚本代码编写dom来编写addToolTip（）方法。

在Angularjs中由ng-options生成的选择框选项的悬停工具提示

3 个答案: