Question

我正在为angular创建自己的数据表。我知道有一堆可供选择，但问题是大多数功能太重而且在返回大型数据集时陷入困境。我们可以实现一些服务器端分页，但它已经很好地将我们的数据放入引导表并使用ui-bootstrap指令为我们提供浏览器内分页。我们还添加了excel导出功能和数据过滤功能。我已经创建了一个指令来减少我们的代码重复，这对于简单的数据非常有用。

该指令采用以下模式中的记录数组和列定义对象：

var columns = [
               {title: 'Name', value: 'name', sortable: true},
               {title: 'Address', value: 'address', sortable: true},
               {title: 'City', value: 'city', sortable: true},
               {title: 'State', value: 'state', sortable: true},
               {title: 'Postal Code', value: 'zip', sortable: true}
             ];

根据这个定义，它会给你五个用 title 属性命名的列，并且它希望每行的数据看起来像这样：

{name: 'Joe', address: '123 Main', city: 'Beverly Hills', state: 'CA', zip: 90210}

然后它将遍历数据集中的每个记录，并将相应的值放入每个字段中。

我的问题是，在尝试使表更灵活时，我添加了一个＆＃34;渲染＆＃34;列定义的选项，您可以提供一种方法，该方法基本上返回一个通过ng-html-bind推送到单元格中的字符串。

render: function(data){
      return '<a href="www.zipcodeLookup.com/' + data.zip + '">' + data.zip + '</a>';
    }

这是我目前对表体的实现。

<tbody>
   <tr ng-repeat="row in vm.getTableData(vm.options.filterText, vm.sortField, vm.sortReverse) | startFromIndex: vm.getStartingElementIndex() | limitTo: vm.options.paging.pageSize">
       <td ng-repeat="column in vm.columns" ng-bind-html="vm.getCellData(row, column)"></td>
   </tr>
</tbody>

我将结果字符串视为可信任的HTML，因此我可以获得按钮等内容。添加基本HTML很好，但是当我试图弄清楚如何添加像ng-click事件这样的角度内容时出现了问题。细胞中的元素。

我尝试过使用here中的bind-html-compile指令，但是当我这样做时，由于消息周期太多，因此会引发错误。我假设它是因为当它运行 getCellData 函数时它会创建一个新的，虽然等效的字符串，每次都会导致另一个摘要。

我尝试将render属性设置为一个模板字符串，该字符串与该指令一起使用但是在执行ng-click并向其提供一个函数时，该函数必须存在于data-table指令的控制器中，因为这是它被编译的地方。那么有没有关于如何使这项工作的建议，或者是否有一些github项目正在做类似于我可以使用或模仿的东西？

具有单元格渲染功能的自定义角度数据表

0 个答案: