使用Angularjs的ASP.NET MVC Razor中表的动态列[关闭]答案

【问题标题】：Dynamic columns for a table in ASP.NET MVC Razor using Angularjs [closed]使用Angularjs的ASP.NET MVC Razor中表的动态列[关闭]
【发布时间】：2014-10-16 06:53:26
【问题描述】：

我需要在 asp.net MVC razor 中为我的作业创建一个动态表。当用户完全填满第一列的所有行时，应在运行时添加新列。列数没有限制。在每列的最后一行，应该会自动生成新的列。

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

提前致谢。

【问题讨论】：

请在您的问题中包含一个最小、完整、可验证的示例。换句话说，告诉我们你做了什么！ stackoverflow.com/help/mcve
谢谢你，先生，但老实说我什么也没做。我对 MVC 很熟悉，但对 angularjs 完全陌生。这几天我一直在网上搜索，但还没有成功。
Q1：所以您只想通过添加列向 -> 那个方向扩展？ Q2：MVC部分要做什么？既然您知道 MVC，您是否已经拥有这方面的代码？ Q3：为什么还需要 angularjs？
Q1：是的，但实际上我想添加新列，在开始时应该只有一列具有有限的行，当用户到达第一列的最后一行时，下一列应该生成运行。 Q2：这将是 MVC 应用程序的一个页面，我被分配了这样做的任务。我曾在 MVC 上为其他项目工作过。没有开始这个。我认为它将在 MVC 视图上（我可能是错的，我只是假设它） Q3：正如我已经说过的那样，它的任务是在 MVC 视图上使用 angularjs 来完成这项工作。我必须完成这项任务，而且我的时间跨度很短。提前致谢
如果我离开 Angular 怎么办。我可以在 MVC 剃刀视图上做同样的事情吗？无论如何，只想去做。

标签： c# asp.net asp.net-mvc angularjs razor

【解决方案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/
缺少一些东西，比如为新列生成正确的标题和存储数据，但这与问题的核心没有直接关系，所以我把它放在这里了。

【讨论】：