md-autocomplete 项目列表？答案

【问题标题】：List of md-autocomplete items?md-autocomplete 项目列表？
【发布时间】：2016-03-01 19:43:13
【问题描述】：

我有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，但听起来对所有项目都一样。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

只是因为所有字段都链接到同一个变量：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

【讨论】：

太好了，我以为我错过了什么，以为md-selected-item是模特
如果我想从列表中删除 White（如果它在另一个列表中被选中）。例如。我选择 White 作为第一选择，而对于第二个选择，您看不到 White 颜色，因为它已被选中。

【解决方案2】：

你可以像这样使用范围变量来代替使用

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：