Search code examples
angularjsangularjs-ng-repeatangular-materialmd-autocomplete

Adding dynamically Angular Material mdAutocomplete

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?

Solution

  • 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;
}