md-autocomplete项目列表?

时间:2016-03-01 19:43:14

标签: angularjs angular-material

我有grid-ui,其中单元格是有角度的材质md-autocomplete

我编写了演示:codepen我在哪里运行(仅限模拟)ng-repeat并尝试为每行选择不同的值。

但是,每当我更改一个项目时,所有其他行也会发生变化。我做错了什么?

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

我的items

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

我使用md-selected-item但听起来对所有项目都是一样的。

3 个答案:

答案 0 :(得分:7)

这只是因为所有字段都链接到同一个变量ctrl.searchtext

只需要更改

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

通过此

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

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

答案 1 :(得分:1)

而不是使用你可以像这样使用范围变量

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

在这种情况下,它使用md-autocomplete范围,您不再需要担心查询变量。

@pbenard解决方案适用于没有分页的列表,或者您不会在第一个索引处插入新项目

答案 2 :(得分:0)

codepen demo我使用物种md-autocomplete,日期选择器和ng-repeat,tab和md-select,

不要使用$ index作为上述解决方案,它会搞乱其他标签的自动编译。

正确的方法是使用2个深层次的模型,

             $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)"