CODEWITHSUNDEEP
angularjsangular-material
snaggs
snaggs

Reputation: 5713

List of md-autocomplete items?

I have grid-ui where cell is angular material md-autocomplete.

I wrote demo: codepen where I run (for simulate only) ng-repeat and try to select different value per row.

However whenever I do when I change one item, all other rows change as well. What am I doing wrong?

My HTML:

 <tr  layout="row" ng-repeat="item in ctrl.items" flex>
        <td class="sc_color" flex>{{$index+1}}.color</td>
        <td flex>
            <md-autocomplete style="margin-bottom:10px;"
        md-selected-item="item.selectedItem"
        md-search-text="ctrl.searchText"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.display"
        md-min-length="0"
        placeholder="Pick a color">
    <md-item-template>
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
</md-autocomplete>
        </td>
    </tr>

My items:

self.items = [
      {
        selectedItem: 'aa'
      },
       {
        selectedItem: 'bbb'
      }
    ];

I use md-selected-item but sounds like its the same for all items.

Upvotes: 4

Views: 3414

Answers (3)

hoogw
hoogw

Reputation: 5525

codepen demo I make this, with species md-autocomplete, date picker and ng-repeat, tab and md-select,

Do not use $index as above solution, it will mess up with other tab's autocompelte.

The right way to do it is very simple use 2 deep level of model, 

             $scope.RemoveTreeList = [
                                        {
                                            //'count':5,
                                            'location':'uuuuuuu',
                                            'note':'SHAMEL ASH',
                                            //'selectedSpecie':{'originalObject': {'code': '', name: ''}},
                                            'selectedItem':'aaaaaaaaaaaa'


                                        },
                                        {
                                            //'count':2,
                                            'location':'iiiiiiiiii',
                                            'note':'CAMPHOR TREE',
                                            //'selectedSpecie':{'originalObject': {'code': '', name: ''}},
                                            'selectedItem':'bbbbbbbbbbbbb'
                                        },
                                        {
                                            //'count':1,
                                            'location':'ppppppp',
                                            'note':'PECAN',
                                            //'selectedSpecie':{'originalObject': {'code': '', name: ''}},
                                            'selectedItem':'ccccccccccccc'
                                        }];



 <div ng-repeat="RemoveTree in RemoveTreeList">  

 md-selected-item="RemoveTree.selectedItem" 

 md-search-text="RemoveTree.searchText"

 md-items="item in ctrl.querySearch(RemoveTree.searchText)"

Upvotes: 0

navid_gh
navid_gh

Reputation: 1883

Instead of using you can use scope variable like this

md-search-text="searchQuery"
md-items="item in ctrl.querySearch(searchQuery)"

In this case it use md-autocomplete scope and you don't need to worry about query variable anymore.

The @pbenard solution is ok for the list which does not have pagination or you don't insert new item at first index

Upvotes: 1

BENARD Patrick
BENARD Patrick

Reputation: 30975

It's just because all the field are linked to the same variable : ctrl.searchtext.

Just have to change this :

md-search-text="ctrl.searchText"
md-items="item in ctrl.querySearch(ctrl.searchText)"

By this :

md-search-text="ctrl['searchText' + $index]"
md-items="item in ctrl.querySearch(ctrl['searchText' + $index])"

Codepen : http://codepen.io/anon/pen/dMPLMb

Upvotes: 7

Related Questions