angular handsontable 无法使用常规范围变量

angular handsontable not working with regular scope variable

我有 angular scope 名为 xd 的变量,我正试图将其显示在 table 中。当我使用常规 table 时,它工作正常:

<table class="table">
  <tr ng-repeat="x in xd">
    <th ng-bind="x.title"/>
  </tr>
</table>

现在我正尝试使用 ngHandsonTable 来达到同样的目的。由于文档仍然不正确,我尝试了类似的方法,但不知何故它没有显示任何内容。我如何使用它才能正常运行?

<hot-table id="previewTable" columnHeaders="false" settings="htSettings" datarows="xd" >
</hot-table>

xd 的示例数据集:

[
  {
    "title": "mytitle1"
  }
  {
    "title": "mytitle2"
  }
  {
    "title": "mytitle3"
  }
]

xd 的另一个输出:

[
  {
    "primary": "2",
    "title": "mytitle1"
  }
  {
    "primary": "3",
    "title": "mytitle2"
  }
  {
    "primary": "4",
    "title": "mytitle3"
  }
]

我想动态分配这些列 headers 和 <hot-table>

中的值

在摆弄这个之后,我想出了:

HTML table:

<div ng-app="demoApp" ng-controller="demoCtrl">
  <hot-table
    id="demoTable"
    datarows="xd"
    settings="{
      colHeaders: xdColumns
    }">
  </hot-table>
</div>

其中列是属性名称:

$scope.xdColumns = Object.keys($scope.xd[0]);

看到这个fiddle:https://jsfiddle.net/hysx1g10/4/

由于您的数据看起来有点混乱(每个项目都有一个 title 属性),我不确定这是否是您要查找的内容。但是就像在常规 table 中一样,您每行有一个成员(xd 数组)。