当与angularJS中的ng-repeat一起使用时，javascript []，[[]]和[{}]之间的工作差异

Question

I have created a form to add multiple users information dynamically. It working fine. But there is a question in my mind about working of array and array of object inside ng-repeat. If I use $scope.users = []; and $scope.users=[{}] , ng-repeat works differently. With $scope.users = [], view appears blank, and $scope.users = [{}], view appears correctly. I have created fiddle link for both. Can anyone explain me what exactly happening here.

Link with $scope.users = [ ], is: http://jsfiddle.net/9Ymvt/2799/
Link with $cope.users = [{ }] , is : http://jsfiddle.net/9Ymvt/2800/

Update: If I use $scope.users = [[]] , It works fine, but the data is not binding first time, as it is binding in $scope.users = [{}] . Data only binds when I click ob addMore users button
Here is the Fiddle link: http://jsfiddle.net/9Ymvt/2801/

What I am thinking , If the data is binding with [{}] , why not with [[]] ;

Answer 1

$cope.users = [{ }] have one object inside its blank {} , so ng-repeat will iterate through the objects inside the array. doesn't matter the objects are empty or not. here your ng-repeat runs for 1 time.

but in

$scope.users = [ ] , users array don't have anything inside, there is nothing to iterate , so ng-repeat is not going to iterate.

Answer 2

[{}] is an array with an empty object so it's length is 1 and looping over it will happen while [] is an empty array with length 0 so a loop will not run over it. Hence, the form is populated when you run with [{}] since angular can loop over the array.

Update: It is not a matter of [] Vs{}. {} is equal to new Object() and [] is equal to new Array(). The outer array, user that you are looping on, attempts to bind the current element of the loop which is person in your case (from below snippet)

ng-repeat="person in users"

to person.name. However, the .name can only be attached to an object and not an array so the binding fails when you use [[]] since angular tries to attach the .name to the array inside.

Answer 3

First one $scope.users = [] is empty array, and the second $scope.users = [{ }] is just an array with one object. When you do ng-repeat it iterates through all objects inside array, and in first case array is empty, that's why view is empty.

this:

$scope.users =  [{ }]

equals to this:

$scope.users =  [];
$scope.users.push({ });

it's just declaration of array with item inside.

Answer 4

Its pretty simple :),

$scope.users = [] is an empty array While $scope.users = [{}] is an array with empty object.