CODEWITHSUNDEEP
angularjs
user1405195
user1405195

Reputation: 1681

Binding ng-repeat to empty array

Is there a more elegant way to do this?

<input type="text" id="items" ng-model="items[0]" placeholder="item1">
<input type="text" id="items" ng-model="items[1]" placeholder="item2">
<input type="text" id="items" ng-model="items[2]" placeholder="item3">
<input type="text" id="items" ng-model="items[3]" placeholder="item4">
<input type="text" id="items" ng-model="items[4]" placeholder="item5">

I want to use ng-repeat but there are no items to iterate through because items is empty at first.

Upvotes: 1

Views: 3058

Answers (4)

Joao Polo
Joao Polo

Reputation: 2163

You can use track by $index to list a null-filled array:

see in jsbin

<div ng-repeat="item in c.list track by $index">
    <input type="text" id="items" ng-model="c.list[$index]" placeholder="item{{$index + 1}}">
</div>

Upvotes: 2

Anthony
Anthony

Reputation: 1827

ng-repeat won't iterate on an empty array. You could try settings items to an array of 5 empty objects, then update the objects later.

Upvotes: 6

skubski
skubski

Reputation: 1606

Or you could actually initialize it differently in your controller, with the new keyword.

  $scope.items = new Array(5);

Upvotes: 0

Zachary Kuhn
Zachary Kuhn

Reputation: 1152

You may want to set items in the controller like the following:

$scope.items = [null, null, null, null, null];

With this you will have an array to iterate over.

Upvotes: 3

Related Questions