Angular generating multiple ng-repeats

Question

In my angular application (angular 1.4.9) I have a problem, where multiple ng-repeats are generated when I do this:

HTML:

<div class="form-group col-md-3">
  <input ng-model="main.startLocation" ng-change="main.getAddressSuggestions(main.startLocation, 'startLocation')" type="text" class="form-control input-lg" placeholder="fx. Aarhus" tabindex=1 name="country" [![enter image description here][1]][1] />

  <label>or select a location from list:</label>
  <div ng-repeat="suggestion in main.startLocationSuggestions">
    <span>{{suggestion}}</span>
  </div>

</div>

controller.js

getAddressSuggestions(address, inputName) {
  if (inputName === "startLocation") {

    /*                  var tmpArray = data;
     for(var item of tmpArray)
     this.startLocationSuggestions = data;*/
    this.startLocationSuggestions = ['dada', 'daa'];
  }
}

But the generated HTML in the dom is:

Why does angular repeat the ng-repeats?

Can Guney Aksakalli · Accepted Answer · 2016-01-23 13:28:42Z

1

If you don't want to repeat parent element, here is html:

<div >
  <span ng-repeat="suggestion in startLocationSuggestions">{{suggestion}}</span>
</div>

Output will be as:

<div>
  <!-- ngRepeat: suggestion in startLocationSuggestions -->
  <span ng-repeat="suggestion in startLocationSuggestions" class="ng-scope ng-binding">dada</span>
  <span ng-repeat="suggestion in startLocationSuggestions" class="ng-scope ng-binding">daa</span>
</div>

This is how ngRepeat works.

answered Jan 23, 2016 at 13:28

Can Guney Aksakalli

1,3301 gold badge11 silver badges24 bronze badges

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

Comments

GHB · Accepted Answer · 2016-01-23 13:26:21Z

1

this is basically how the ng-repeat works! at the start it writes a comment like:

<!-- ngRepeat: x in items -->

then for every element that's been created with ng-repeat, after creating it (WITH the ng-repeat attribite inside), writes another comment:

<!-- end ngRepeat: x in items -->

answered Jan 23, 2016 at 13:26

GHB

9476 silver badges13 bronze badges

Comments

not-found.404 · Accepted Answer · 2016-01-23 13:28:16Z

1

Because it just takes your template as is (div ng-repeate lalala), clones it N times, fills with data and put into DOM.

answered Jan 23, 2016 at 13:28

not-found.404

703 bronze badges

Collectives™ on Stack Overflow

Angular generating multiple ng-repeats

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related