md-autocomplete with multiselect复选框和双向绑定

时间:2017-06-10 06:57:19

标签: javascript angularjs autocomplete angular-material multi-select

我正在尝试使用多选项选项实现自动完成下拉列表复选框, 因此,当用户搜索文本时,它应显示带有复选框选项的项目。并且用户可以选择多个项目。

用户选择项目后,应在下拉列表下方显示所选项目列表并显示删除选项。

所选项目存储在对象数组中。

我用下面的组合做了这个,

<md-autocomplete class="md-primary" md-no-cache="true"
                                 md-selected-item="vm.selectedItem"
                                 md-search-text="vm.searchText"
                                 md-items="item in vm.find(vm.searchText)"
                                 md-item-text="item.Name"
                                 md-min-length="3"
                                 placeholder="Type here to search...">
                    <md-item-template>
                        <md-checkbox ng-click="vm.ItemSelected(item, $event)" stop-event></md-checkbox>
                        <div>
                            <span class="item-title">
                                <span md-highlight-text="vm.searchText">{{item.Name}}</span>
                            </span>
                        </div>
                    </md-item-template>
                    <md-not-found>
                        No items were found.
                    </md-not-found>
                </md-autocomplete>

使用event.stopPropagation()指令“stop-event”来防止点击后下拉崩溃。

但问题是,我无法将搜索结果项与已选择的项绑定。

如果已选择该项目,则无法从搜索列表中选中标记为已选中。

我已经搜索了修复程序,所有人都说使用了md-chips,但我想用md-autocomplete来做。

有人可以帮我吗?

0 个答案:

没有答案