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

• 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

4 Answers 4

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/