javascript - ngModel "Cannot set property of undefined" when using indexer - Stack Overflow

admin管理员组

文章数量:1410717

I have following markup

<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>

controller looks like this

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

When i try to set column value that does not yet exist, i get

"Cannot set property 'val' of undefined".

Example is here /

In documentation is note:

ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

But it fails when using indexer instead of property name.

Is there a way to define ngModel expression dynamically or am i misusing angular?

I have following markup

<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>

controller looks like this

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

When i try to set column value that does not yet exist, i get

"Cannot set property 'val' of undefined".

Example is here http://jsfiddle/z9NkG/2/

In documentation is note:

ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

But it fails when using indexer instead of property name.

Is there a way to define ngModel expression dynamically or am i misusing angular?

• javascript
• angularjs

Share Improve this question Follow edited Oct 3, 2013 at 6:21 maxlego asked Oct 3, 2013 at 6:12 maxlegomaxlego 4,91433 gold badges3232 silver badges3838 bronze badges 3

• nice workaround: jsfiddle/z9NkG/4 – Ivan Chernykh Commented Oct 3, 2013 at 6:28
• Yes it is failing on usage of indexer. – Chandermani Commented Oct 3, 2013 at 6:28
• @Cherniv, I want to be able to create those values that are disabled in your example – maxlego Commented Oct 3, 2013 at 6:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

And what about:

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

Fiddle: http://jsfiddle/z9NkG/8/

I'm not sure about your model, but I think you are using a 2 dimensional array. I'm oversimplifying, not knowing,

make cols collection a child or rowsL

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

And then use nested 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>

The main problem is that you're setting an undefined property of an undefined object as the input's model. Angular does indeed automatically create the corresponding variables for your model binding, but to do so, you would have to bind the input directly to the row[col] property instead of row[col].val :

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

Here's the live demo: http://jsfiddle/z9NkG/9/

try this

make changes in controller add below code

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

        });
    })

yo can refer fiddle http://jsfiddle/z9NkG/10/

本文标签： javascriptngModel quotCannot set property of undefinedquot when using indexerStack Overflow