【问题标题】:How to show html ng-repeat inside tooltip如何在工具提示中显示 html ng-repeat
【发布时间】:2019-02-16 20:15:51
【问题描述】:

我正在使用 angularjs,所以我在我的应用程序中添加了一个指令。

app.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element)
                .attr('title', scope.$eval(attrs.tooltip))
                .tooltip({ placement: "right" });
        }
    }
})

我想显示下面的html或类似的东西,我只想显示tooltip中的客户列表

<ol>
    <li ng-repeat='dt in detail.SelectedCustomers'>{{dt.name}}</li>
</ol>

下面是tooltip所在的表。

<tr ng-repeat="detail in mainCtrl.lineDetails">
    <td><a href="#" data-toggle="tooltip" data-placement="right" data-html="true" tooltip="detail.SelectedCustomers"><i class="fa fa-eye fa-lg" aria-hidden="true"></i></a></td>
</tr>

【问题讨论】:

  • 不太确定,但我认为本机工具提示不足以显示您想要的列表。您可以使用第三方库,通过自定义工具提示/弹出框帮助您做到这一点。可能是angular-ui
  • 你能分享一下 mainCtrl.lineDetails 的值吗?会对你更有帮助。您希望在工具提示中显示什么类型的内容?

标签: angularjs html-table angularjs-ng-repeat tooltip


【解决方案1】:

我做了一个fiddle 来向你展示如何做

.directive("myTooltip", [ function(){
return{
scope: {
customers:'=myTooltip'
},
link:function(scope, el){
var toDisplay = '';
for(var i = 0; i < scope.customers.length; i++){
toDisplay += scope.customers[i].name+'\n';
}

el.attr('title', toDisplay);

【讨论】:

  • @klent 你将不得不在你的html中使用这样的&lt;div my-tooltip="customersList"&gt;hover me&lt;/div&gt;
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-11
  • 2014-03-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多