Question

我正在使用md-autocomplete向用户显示数据

  <form name="searchForm" ng-submit="$event.preventDefault()">
                <md-autocomplete
                    md-no-cache="true"
                    md-selected-item="ctrl.selectedItem"
                    md-search-text="ctrl.searchText"
                    md-items="item in ctrl.querySearch(ctrl.searchText)"
                    md-item-text="item.display"
                    md-min-length="0"
                    placeholder="enter Name"
                    md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                    md-selected-item-change="ctrl.selectedItemChange(item,$event)"
                    >
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
                    </md-item-template>

                    <md-not-found>
                       not found anything!
                    </md-not-found>
                </md-autocomplete>
            </form>

当用户单击结果时，使用$ mdDialog在弹出窗口中显示

 function selectedItemChange(item,ev) {

    $mdDialog.show({
        locals: { drugData: item },
        controller: DialogController,
        templateUrl: 'DIALOG.TMPL.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: true,
        fullscreen: false  
    });
    self.selectedItem = '';

}

我在用户单击后使用self.selectedItem = '';清除搜索文本，但这导致$ mdDialog显示两次，并且传递给对话框的项目第二次变为空。如何防止对话框两次显示？
是否有类似md-selected-item-click的内容？
我想在用户单击结果时显示对话框，并且只发生一次

Answer 1

“ selectedItemChange”功能在用户选择自动完成值（item）和“ self.selectedItem ='';”时涉及两次。在“ selectedItemChange”函数中添加一个检查，“ item”值是否为空或未定义。

function selectedItemChange(item,ev) {
  if(item !== '' && item !== undefined) {
    $mdDialog.show({
        locals: { drugData: item },
        controller: DialogController,
        templateUrl: 'DIALOG.TMPL.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: true,
        fullscreen: false  
    });
  }
    self.selectedItem = '';

}

上面的代码应该可以正常工作，并且只会看到一个对话框。如果传递给对话框的项目仍然为空，则将项目的副本传递给对话框。即Angular.copy（item）或Object.assign（{}，item）

mdDialog在AngularJS中显示两次md-autocomplete

1 个答案: