angularjs - Explain this dynamic ng-model different behaviors? -

angularjs - Explain this dynamic ng-model different behaviors? -

1 :

<ul> <li ng-repeat="item in items"> <label>{{item.name}}</label> <input type="text" ng-model="newobject[$index]"> // works fine </li> </ul>

2 :

<ul> <li ng-repeat="item in items"> <label>{{item.name}}</label> <input type="text" ng-model="newobject.something[$index]"> // not working </li> </ul>

in angular controller,

$scope.newobject = {}; $scope.items = [{name:'foo'}, {name:'bar'}, {name:'baz'}];

1 working expected. 2 not working previous one, cant type within textbox. going in here, , how should solve this. :)

update

solve issue adding line within controller

$scope.newobject.something = {};

but dont know why working, can please explain ?

because property something doesn't exist on newobject until define - there's error beingness thrown when trying bind model.

declare model first:

$scope.newobject = { something: {} }

$scope.newobject[$index] looks $index property on newobject - if not found it'll create it. when have $scope.newobject.something[$index] looks something property - doesn't find it, hence can't bind additional $index property 1 layer deeper.

simple javascript really:

var myobj = {}; myobj.something = "k"; //works fine myobj.something.somemore = "x"; //works fine myobj.somethingnew.somemorenew = "j"; //throws error because property "somethingnew" doesn't exist, hence "somemorenew" cannot created kid property

angularjs ng-repeat