javascript - 如何使用 angular.js 将具有多个数组的数据显示为 html 表？

Question

假设数据结构如下:

[
 {name: 'first', data1: [1,2,3], data2: [4,5]},
 {name: 'second', data1: [9,8,7], data2: [6,6,4,5]}, 
 ...
]

(注意data1和data2不是定长的，不一定等长)。

我想创建一个 html 表格:

<table>
 <thead>
   <th> Name </th>
   <th> Data 1 </th>
   <th> Data 2 </th>
 </thead>
 <tbody>
  <tr>
    <td rowspan="4">first</td>
    <td>1</td>
    <td>4</td>
  </tr>
  <tr>   
    <td>2</td>
    <td>5</td>
  </tr>
  <tr>   
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr>   
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td rowspan="5">first</td>
    <td>9</td>
    <td>6</td>
  </tr>
  <tr>   
    <td>8</td>
    <td>6</td>
  </tr>
  <tr>   
    <td>7</td>
    <td>5</td>
  </tr>
  <tr>   
    <td>&nbsp;</td>
    <td>5</td>
  </tr>
  <tr>   
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 </tbody>
<table>

请注意，在显示中，每一列的最后一位数据之后至少有一个额外的空单元格。我想要那个单元格，每个 data1 和 data2 的第一个空单元格，有一个 ng-click 处理程序，如果单击它会在该列中显示输入而不是 %nbsp;可以在其中输入新值。

完成此任务的最佳方法是什么？

目前，我几乎可以通过在作用域上设置第二个变量来创建上述结构，该变量监视第一个变量，当第一个变量发生变化时，它会展平数据，因此上述数据将存储在另一个变量中，如下所示:

[ { name: 'first', rowsNeeded: '4', data: [ [1,4], [2,5], [3, undefined], [undefined, undefined]], ... ]

然后渲染成

 <tbody ng-repeat="item in flattenedData">
    <tr ng-repeat="data in item.data">
        <td ng-if="$first" rowspan="{{data.rowsNeeded}}">{{data.name}}</td>
        <td>{{data[0] == undefined ? '&nbsp;' : macroData[0] }}</td>
        <td>{{data[1] == undefined ? '&nbsp;' : macroData[1] }}</td>
    </tr>
</tbody>

但我想知道一些事情。第一，我真的需要使用 watch 语句创建第二个变量来创建表，还是有更简洁的方法？第二，我不确定如何添加点击事件，所以在每列的第一个“未定义”上我可以添加一个而不是“ ”。最后，真的有必要为每一行设置不同的 tbody 标签吗？

感谢您的帮助!

Answer 1

总体思路是将数据格式提取到过滤器中。从那时起，我会将所有内容组合到指令中以简化表组件的使用。此示例 ( JSBin) 仅显示过滤器和模板，不是最佳的，但有效:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th ng-repeat="key in datas[0]|dataKeys">
                Data {{$index+1}}
            </th>
        </tr>
    </thead>
    <tbody ng-repeat="set in datas">
        <tr ng-repeat="row in (set|setMaxLength|range)">
            <td
              rowspan="{{(set|setMaxLength)+1}}"
              ng-if="!$index"
            >
                {{set.name}}
            </td>
            <td ng-repeat="data in (set|setDatas)">
                {{data[$parent.$index]}}
            </td>
        </tr>
        <tr>
            <td
              ng-repeat="data in (set|setDatas)"
              ng-click="editing = true"
            >
                <span ng-if="!editing">&nbsp;</span>
                <form
                  ng-submit="data[data.length] = input.value"
                  name="input"
                >
                    <input
                      type="text"
                      ng-if="editing"
                      ng-model="input.value"
                      autofocus
                    >
                </form>
            </td>
        </tr>
    </tbody>
</table>

angular
.module("app", [])
.controller("ctrl", function($scope) {
    $scope.datas = [{
        name: 'first',
        data1: [1, 2, 3],
        data2: [4, 5]
    }, {
        name: 'second',
        data1: [9, 8, 7],
        data2: [6, 6, 4, 5]
    }];
})
.filter("range", function() {
    return function(length) {
        return Array.apply(0, Array(length))
        .map(function(_, i) {
            return i;
        })
    }
})
.filter("dataKeys", function() {
    return function(set) {
        return Object.keys(set)
        .filter(function(key) {
            return key.indexOf("data") !== -1;
        })
    }
})
.filter("setDatas", function($filter) {
    return function(set) {
        return $filter("dataKeys")(set)
        .map(function(key) {
            return set[key]
        });
    }
})
.filter("setMaxLength", function($filter) {
    return function(set) {
        return $filter("dataKeys")(set)
        .map(function(key) {
            return set[key].length;
        })
        .sort().pop();
    }
})