Printing out array in the html with ng-repeat

Question

I have an array of doubles (they turn into doubles eventually) in my controller that I am trying to print on my web page using ng-repeat, but I am unsure how to do so. The array is simply":

vm.calorieArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

where vm is the alias of my controller.

In my html I have a div that looks like this that is attempting to print it out:

<div ng-repeat="value in vm.calorieArray">
    {{value}}<br />
</div>

but nothing shows up on the page. Does anyone see the problem?

looks right to me, it's probably something else, you need to post more. Did you declare ng-app? — ergonaut
– ergonaut, Commented Nov 2, 2015 at 3:00
Use ng-repeat="value in calorieArray" instead of ng-repeat="value in vm.calorieArray" — Shohel
– Shohel, Commented Nov 2, 2015 at 3:40
@Shohel, i think OP used controller as syntax, so $scope not needed — Grundy
– Grundy, Commented Nov 2, 2015 at 4:11

Adam_O · Accepted Answer · 2015-11-02 04:22:35Z

2

The issue could be because of duplicate values not being allowed in the ng-repeat. See this plunker for an example of the issue. (Open up your dev console to see the JS errors) The description of the error can be found here.

In short you should use 'track by $index' as in the following:

<div ng-repeat="value in calorieArray track by $index">
    {{value}}<br />
</div>

edited Nov 2, 2015 at 4:22

answered Nov 2, 2015 at 3:56

Adam_O

3413 silver badges11 bronze badges

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

Comments

Matt Way · Accepted Answer · 2015-11-02 04:35:16Z

0

Here is a fiddle with your example working: http://jsfiddle.net/JKBbV/743/

The controller is as simple as:

myApp.controller("myCtrl", function($scope) {
    $scope.values = [0,0,0,0,0.1];
});

My guess is that your app is not initialising correctly, or you aren't properly binding your array to the $scope.

edited Nov 2, 2015 at 4:35

answered Nov 2, 2015 at 3:47

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

1 Comment

Grundy Over a year ago

if you use not old angular version you get error: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: value in values, Duplicate key: number:0, Duplicate value: 0 : jsfiddle.net/JKBbV/742

Collectives™ on Stack Overflow

Printing out array in the html with ng-repeat

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related