如何在角度数据表中组合数据和显示图像

我正在使用angular datatable来创建表，以下是我的工作plnkr – http://plnkr.co/edit/pQ0TrNEjzyXmvFcIvkSr?p=preview

在这里，我想将两个列数据合并为一个，即将地址1和地址2显示为地址类似于 – addr1 – addr2以及（2）以在表列而不是链接中显示图像。

我试过了 –

DTColumnBuilder.newColumn('addr1' - 'addr2').withTitle('Address 1'),和DTColumnBuilder.newColumn('addr1 - addr2')但没有运气（抛出错误）

请帮我解决一下这个。 谢谢。

我的脚本 –

 var dd = []; dd = [ {"Img": "http://sofzh.miximages.com/javascript/animal head masks-011 (4).jpg", "Name": "Tiger Nixon", "Age": "61", "addr1": "234 My addr 1", "addr2": "234 My addr 2"}, {"Img": "http://sofzh.miximages.com/javascript/animal-animes.png", "Name": "Garrett Winters","Age": "63", "addr1": "235 My addr 1", "addr2": "235 My addr 2"} ]; $scope.dtColumns = [ DTColumnBuilder.newColumn('addr1').withTitle('Address 1'), DTColumnBuilder.newColumn('addr2').withTitle('Address 2'), DTColumnBuilder.newColumn('Img').withTitle('Image'), DTColumnBuilder.newColumn('Name').withTitle('Name'), DTColumnBuilder.newColumn('Age').withTitle('Age') ]; $scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('data', dd); 

Answer 1

您必须在列angular-datatable文档中使用renderWith

 $scope.dtColumns = [ DTColumnBuilder.newColumn('addr1').withTitle('Address 1'), DTColumnBuilder.newColumn('addr2').withTitle('Address 2'), DTColumnBuilder.newColumn(null).withTitle('Full Address').renderWith(addressHtml), DTColumnBuilder.newColumn('Img').withTitle('Image'), DTColumnBuilder.newColumn('Name').withTitle('Name'), DTColumnBuilder.newColumn('Age').withTitle('Age') ]; $scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('data', dd); function addressHtml(data, type, full, meta) { return data.addr1 + ' - ' + data.addr2; } 

更新的plunker： http ：//plnkr.co/edit/T2XMUFxORSy3z7dDgRcc？p = preview

如果需要，可以添加图像…