在HandsonTable中使用数组的数据Angular指令

Question

我想使用Angular指令创建的HandsoneTable中的一些列中的数组作为数据源。但是，对数据属性使用常用数组符号（name[0]）时，该特定的表格单元格中将不显示任何内容。我做错了什么，或者这不应该按照我想要的方式工作？

我的数据源：

$scope.data = [ 
    { 
     'name': ['Bob', 'Bobson'], 
     'email': 'bob@sample.com' 
    }, 
    { 
     'name': ['John', 'Johnson'], 
     'email': 'john@sample.com' 
    } 
]; 

而且我的模板：

<div ng-app="Test"> 
    <div ng-controller="tableCtrl"> 
     <hot-table datarows="data"> 
      <hot-column data="name[0]"></hot-column> 
      <hot-column data="name[1]"></hot-column> 
      <hot-column data="email"></hot-column> 
     </hot-table> 
    </div> 
</div> 

看到这里简单的例子：https://jsfiddle.net/9qzo3wnv/4/

Answer 1

技术上是不可能使用数组表示法（名称[0 ]）的数据属性，但你有几个其他的选择来完成一些事情：

解决方案1 ​​

改为将数据转换为对象。

实施例：https://jsfiddle.net/4yuv1vyu/

$scope.data = [ 
    { 
    'name': {0:'Bob',1:'Bobson'}, 
    'email': 'bob@sample.com' 
    }, 
    { 
    'name': {0:'John',1: 'Johnson'}, 
    'email': 'john@sample.com' 
    } 
]; 

---

溶液2

阵列转换为对象在控制器的功能：

实施例：https://jsfiddle.net/vypahad6/

德尾巴：https://stackoverflow.com/a/4215753/3298029

$scope.toObject = function(arr) { 
    var rv = {}; 
    for (var i = 0; i < arr.length; ++i) 
    rv[i] = arr[i]; 
    return rv; 
} 

for (var d in $scope.data) { 
    $scope.data[d].name = $scope.toObject($scope.data[d].name); 
} 

---

解决方案3

利用handsontable的自定义单元格渲染能力：

例子：https://jsfiddle.net/sbkwcfr5/

详情：http://docs.handsontable.com/0.24.1/demo-custom-renderers.html

View: 
<hot-column data="name" renderer="customRendererName"></hot-column> 

Controller: 
$scope.customRendererName = function(instance, td, row, col, prop, value, cellProperties) { 
    var html = Handsontable.helper.stringify(value[0]); 
    td.innerHTML = html; 
    return td; 
    return value[0]; 
}