将列表显示为Hover上的表格？

Question

我正在处理的项目有以下情况：

目前，当我将鼠标悬停在＆＃34; Idle HF＆＃34; （从图像），我得到一个以逗号分隔值显示的列表。我需要将它放在一个表中，每个值都在一行中，我需要通过Angular JS实现这一点。

非常感谢任何帮助。

根据要求：

  <p-column field="tdst" header="TDST" [style]="{'text-align': 'left'}">
    <ng-template let-row="rowData" pTemplate="body">
      <span title = {{row.tdlist}}>{{row.tdst}}</span>
    </ng-template>
  </p-column>

在代码中， tdlist是我在悬停时显示的python列表。 tdst是要实现悬停属性的列值

Answer 1

您可以尝试使用ui.bootstrap tooltips。他们可以拉出模板，用数组填充模板，然后在悬停/点击/功能调用上显示它。这是一个小型演示：

＆＃13;

＆＃13;

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.array = [1, 2, 3, 4, 5];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div ng-app="myApp" ng-controller="myCtrl">

  <span uib-tooltip-template="'template.html'" tooltip-placement="bottom-right" tooltip-trigger="'mouseenter'">Idle HF (in a table)</span>

  <script type="text/ng-template" id="template.html">
    <table class="table">
      <tr>
        <th>Values</th>
      </tr>
      <tr ng-repeat="x in array">
        <td>{{ x }}</td>
      </tr>
    </table>
  </script>

</div>

＆＃13;

＆＃13;

＆＃13;

您的模板可以是一个单独的文件，您可以根据需要修改数据。