2016-01-23 1 views
0

В моем угловом приложении (угловой 1.4.9) У меня есть проблема, где генерируются несколько нг-повторы, когда я это сделать:Угловые генерации несколько нг-повторы

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> 

контроллера .js

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

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

Но сгенерированный HTML в РОМ: enter image description here

Почему угловые повторяют ng-повторы?

ответ

1

Если вы не хотите повторить родительский элемент, вот HTML:

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

выход будет как:

<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> 

Вот как ngRepeat работает.

1

Это в основном, как работает ng-repeat! в начале он пишет комментарий как:

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

то для каждого элемента, который был создан с нг-повтора, после его создания (с нг-повтор attribite внутри), пишет еще один комментарий:

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

Потому что он просто берет ваш шаблон как есть (div ng-repeatate lalala), клонирует его N раз, заполняет данные и помещается в DOM.