Question

我有以下标记

<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表达式还是误用了角度？

Answer 1

那怎么样：

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

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

Answer 2

我不确定你的模型，但我认为你使用的是二维数组。我过于简单化，不知道，

使cols collection成为子项或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>

Answer 3

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

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

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

Answer 4

试试这个

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

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

        });
    })

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

ngModel“使用索引器时无法设置undefined的属性”

4 个答案: