Adding dynamically Angular Material mdAutocomplete

Question

i have a long color list and i want to create a table for color selection. But when i repeat my table row with ng-repeat, all mdAutocompletes ran together and didn't work. here is what i've tried: codepen.io/anon/pen/avoMbg

How can i fix this?

Answer 1

Do following changes in your HTML file :

HTML:

<md-autocomplete style="margin-bottom:10px;"
    md-selected-item="sc.selectedItem"
    md-search-text="sc.searchText"
    md-items="item in sc.querySearch(sc.searchText)"
    md-item-text="item.display"
    md-min-length="0"
    placeholder="Pick a color">
      <md-item-template>
         <span md-highlight-text="sc.searchText" md-highlight-flags="^i">{{item.display}}</span>
      </md-item-template>
</md-autocomplete>

Inside your controller:

JS:

for(var i=0;i<self.colors.length;i++){
    self.colors[i].querySearch=querySearch;
}

Answer 2

You are using same variable for md-selected-item and md-search-text in all of md-autocomplete. You forget to use sc instead ctrl.

http://codepen.io/anon/pen/avoMbg