工具提示上的Angulerjs伍選項生成的選擇框選項

我使用NG選項迭代在選擇框中選擇哈弗，這裏是我的代碼如下..工具提示上的Angulerjs伍選項生成的選擇框選項

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

我想顯示工具提示displayAttr當懸停在選項.. 任何指針？

來源

2015-10-06 Nir

請參閱angular ui bootstrap [文檔]（https://angular-ui.github.io/bootstrap/#/tooltip） – MaheshKumar

對選擇框選項沒有幫助 – Nir

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

希望這有助於。 :)

來源

2015-10-07 12:35:38 MaheshKumar

其工作正常，但我使用ng-options與很多過濾器我只能在選擇框中做一些事情，不能使用選項標籤來實現它。 – Nir

創建一個你想要的工作演示，不用工具提示 – MaheshKumar

http://plnkr.co/edit/xkHBIRjgZ2Y3FzHXogpL - 檢查這個小提琴，我已經添加了我的代碼與更新的零件評論，但工具提示不起作用 – Nir

工具提示上的Angulerjs伍選項生成的選擇框選項

回答

相關問題