4

我有以下标记

<div ng-app>
    <table ng-controller="test">
        <tbody>
            <tr ng-repeat="row in rows">
                <td ng-repeat="col in cols">
                    <input type="text" ng-model="row[col].val" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

控制器看起来像这样

function test($scope) {
    $scope.cols = ["col1", "col2", "col3"];
    $scope.rows = [{
        col1: { val: "x"}
    }, {
        col2: { val: "y" }
    }]
}

当我尝试设置尚不存在的列值时，我得到

“无法设置未定义的属性 'val'”。

示例在这里http://jsfiddle.net/z9NkG/2/

在文档中注意：

ngModel 将尝试绑定到通过评估当前作用域上的表达式给出的属性。如果此范围内尚不存在该属性，则会隐式创建该属性并将其添加到范围中。

但是当使用索引器而不是属性名称时它会失败。

有没有办法动态定义 ngModel 表达式，还是我滥用了角度？

4

4 回答 4

3

那么：

<input type="text" ng-model="row[col].val" ng-init="row[col] = row[col] || {}" />

小提琴：http: //jsfiddle.net/z9NkG/8/

于 2013-10-03T06:41:55.623 回答
1

我不确定您的模型，但我认为您使用的是二维数组。我太简单了，不知道，

使 cols 集合成为子集合或 rowsL

function test($scope) {
    $scope.colnames = ["col1", "col2", "col3"];
    $scope.rows = [{
        cols: { col1: "x"},  { col2: "y"}
    }, {
        cols: { col1: "z"},  { col2: "a"}
    }]
}

然后使用嵌套的 ng-repeats

  <table>
    <tbody>
        <tr ng-repeat="row in rows">
            <td ng-repeat="col in row.cols">
                <input type="text" ng-model="col.val" />
            </td>
        </tr>
    </tbody>
  </table>
于 2013-10-03T06:17:34.630 回答
0

主要问题是您将未定义对象的未定义属性设置为输入模型。Angular 确实会自动为您的模型绑定创建相应的变量，但要这样做，您必须将输入直接绑定到row[col]属性，而不是row[col].val： 

<input type="text" ng-model="row[col]" />

这是现场演示：http: //jsfiddle.net/z9NkG/9/

于 2013-10-03T06:45:56.417 回答
0

尝试这个

在控制器中进行更改添加以下代码

 $scope.cols.forEach(function(x, y) {
        angular.forEach($scope.rows, function(i, j) {
            if ((i[x])== null)
                i[x] = {};

        });
    })

你可以参考小提琴http://jsfiddle.net/z9NkG/10/

于 2013-10-03T06:49:53.660 回答