Question

我需要在asp.net MVC razor中为我的作业制作一个动态表。当用户完全填充第1列的所有行时，应在运行时添加新列。列没有限制。在每列的最后一个行上，应自动生成新列。 Here is the sample image

应该从用户询问时间间隔，并且应该根据间隔添加新列。

提前致谢。

Answer 1

要实现这一点，您可以使用以下模式在Angular中构建动态表模型：

列模型
为列定义模型以描述列并指定其标题以及列是否为动态：

$scope.columns = [
{
   title: 'Desc.',
   isDynamic: false,
   index: 0
},
{
   title: '30',
   isDynamic: true,
   index: 1
},
...

数据模型
接下来为包含数据定义一个模型，该模型保存每个单元格的值，如下所示：

$scope.data = [
    {
       index: 0,
       values: ['Text', 0]
    },
    {
       index: 1,
       values: ['Text2', 0]
    },
];

插入列的逻辑
然后你需要一些逻辑来确定编辑的行是否被完全填充，如果是，则添加一个新的。
编辑的行将作为参数传递给函数。

$scope.checkAddNewCol = function(rowData) {
    var addNewCol = true;
    $scope.columns.forEach(function(col){
            var colIndex = $scope.columns.indexOf(col);
            var value = value = rowData.values[colIndex];
            var isEmptyDynCol = col.isDynamic && (value === undefined || value === '');
            if (isEmptyDynCol){
                addNewCol = false;
            }
        });
    if (addNewCol){
        var newColIndex = $scope.columns.length;
        $scope.columns.push({
            title: 'New Cloumn [' + newColIndex + ']',
            isDynamic: true,
            index: newColIndex
        });
    }
};

将所有内容放在一起
最后将所有内容放在HTML中：
- 通过枚举列来创建标题 - 通过枚举数据来创建所有行 - 输入上的ng-changed用于触发逻辑，检查是否需要新的col。

在这里你可以看到为什么索引属性是必需的，因为你在HTML标记中需要它们来构造绑定（ng-model不接受函数）

<table>
    <tr>
        <td ng-repeat="col in columns"><strong>{{col.title}}</strong></td>
    </tr>
    <tr ng-repeat="row in data">
        <td ng-repeat="col in columns">
           <input ng-model="data[row.index].values[col.index]" ng-change="checkAddNewCol(row)"/>
        </td>
    </tr>
</table>

<强>摘要
你可以在这里找到一个完整的例子：http://jsfiddle.net/edpqtop4/12/
有些事情缺失，例如为新列生成正确的标题并存储数据，但这与问题的核心没有直接关系，所以我把它留在了这里。

使用Angularjs的ASP.NET MVC Razor中表的动态列

1 个答案: