Cannot initialize ng-model in JS rather than HTML

Question

HTML:

...
<input ng-init="item.check=false" type="checkbox" ng-model="item.check">
...
<input ng-init="item.name=''" class="form-control" ng-model="item.name">
...

JS:

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope, $http) {
var refresh = function() {
    $scope.item.check = false;
    $scope.item.name = "";

}
//Call upon loading app to initialize values, also called upon events to refresh the field
refresh();

I initially thought that just the JS is sufficient to initialize the values and so I got rid of both the checkbox and the form's ng-init then ended up getting the error:

TypeError: Cannot set property 'name' of undefined

The app works if I just leave both ng-init. It also works when I remove the ng-init from only one of the 2 elements (so either from the checkbox or the form) but it will not work if I remove both. What is going on here? Am I doing this correctly or is there a better way to initialize?

Thanks.

Icycool · Accepted Answer · 2015-07-01 19:13:14Z

1

You can add $scope.item = {} in first line of your controller.

Javascript reports error when you are trying to access $scope.item.name when $scope.item itself doesn't exist (or not an object in some cases).

When you do ng-init, angular creates the object for you so you don't get the error.

answered Jul 1, 2015 at 19:13

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

I see! Is it correct to say that we are initializing item as an object or a dictionary?

Icycool Over a year ago

Object. javascript doesn't have a dictionary type AFAIK, we just use object to implement one.

michelem · Accepted Answer · 2015-07-01 19:13:34Z

1

Add this to the controller

$scope.item = {};

answered Jul 1, 2015 at 19:13

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Collectives™ on Stack Overflow

Cannot initialize ng-model in JS rather than HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related