Angularjs undefined error

Question

Hi I have following html

 <tbody ng-repeat="c in forms">
        <tr>
            <td> <input type="text" ng-model=c.name /> </td> 
           <td>  <input type="text" ng-model=c.ac />  </td>                         
        </tr>
        <tr ng-repeat="a in c.te">

             <td> <input type="text" ng-model=a.name /> </td> 
             <td>  <input type="text" ng-model=b.ac /></td>                                                                       
         </tr>
  </tbody>
    <button ng-click="add(c)">Add</button>
    <button ng-click="submit(c)">Crate account</button>

In my controller

 $scope.forms = [{
      "name" : "form1", "ac": 251
    }, {
       "name": "form2", "ac": 252
    }, {
       "name": "form3", "ac": 253
    }];


    $scope.addRows = function (c) {
        alert(form);
        if (typeof c.te == 'undefined') {
            c.te = [];
        }
        alert("pushing");
        c.te.push({ name: '', ac: ''});      
    };

I keep getting error at if (typeof c.te=='undefined') saying

Error: c is undefined

Please let me know what is wrong here. The if statement is supposed to check if it is undefined, but it doest work Thanks

Answer 1

You get the error because the button tags are outside the ng-repeat directive.

<tbody ng-repeat="c in forms">
    <tr>
        <td>
            <input type="text" ng-model=c.name />
        </td> 
        <td>
            <input type="text" ng-model=c.ac />
        </td>
    </tr>
    <tr ng-repeat="a in c.te">
        <td>
            <input type="text" ng-model=a.name />
        </td> 
        <td>
            <input type="text" ng-model=b.ac />
        </td>
    </tr>
</tbody>

<button ng-click="add()">Add</button>
<button ng-click="submit()">Crate account</button>

Your controller code is also weird - you want to add a new record but you seem to be accepting a parameter?

EDIT: If it isn't obvious already, since the button is outside the ng-repeat directive, the c argument is no longer available for use with the button tag. Hence, when the scope function is called, the parameter is undefined and thus the error.

Answer 2

c is undefined (and not an Object) reading the te property throws an error.

Because when checking typeof c.te === 'undefined' javascript will first read the property te from c before performing the typeof.

if (typeof c === 'undefined') {
   c = {};
}
if (typeof c.te === 'undefined') {
   c.te = [];
}

If you know both c and c.te should be truthy you can write:

c = c || {};
c.te = c.te || [];

Answer 3

if (typeof c.te == 'undefined') {
        c.te = [];
    }

Here you are trying to check if c.te is undefined. first you need to check if c is undefined or not. and that's what the error says.