Binding ng-repeat to empty array

Question

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.

Why do you want to see them if they are empty? Maybe a little more context would be good. — ajmajmajma
– ajmajmajma, Commented Jul 30, 2015 at 13:47
You should initialize items[] in your controller or directive. Then you can ng-repeat over it. — hgoebl
– hgoebl, Commented Jul 30, 2015 at 13:47
you can create an array with 5 positions, but you need to put track by $index to allow the repeat to work — Joao Polo
– Joao Polo, Commented Jul 31, 2015 at 12:20

Bjørn-Roger Kringsjå · Accepted Answer · 2015-07-30 14:13:31Z

6

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.

edited Jul 30, 2015 at 14:13

Bjørn-Roger Kringsjå

10.1k6 gold badges43 silver badges66 bronze badges

answered Jul 30, 2015 at 13:49

Anthony

1,8772 gold badges18 silver badges30 bronze badges

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

Comments

Zachary Kuhn · Accepted Answer · 2015-07-30 13:51:14Z

3

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.

answered Jul 30, 2015 at 13:51

Zachary Kuhn

1,1526 silver badges13 bronze badges

Comments

Joao Polo · Accepted Answer · 2015-07-31 12:29:43Z

2

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>

answered Jul 31, 2015 at 12:29

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

Comments

skubski · Accepted Answer · 2015-07-30 14:11:39Z

0

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

  $scope.items = new Array(5);

answered Jul 30, 2015 at 14:11

skubski

1,6162 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

Binding ng-repeat to empty array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related