CODEWITHSUNDEEP
angularjsangular-material
AminM
AminM

Reputation: 1824

mdDialog show twice in AngularJS md-autocomplete

i am using md-autocomplete to show data to user 

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

when user click on result,it show on popup using $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 = '';

}

i use self.selectedItem = ''; to clear search text after user click but it cause $mdDialog showed twice and item that passed to dialog is become empty in second time.how can i prevent dialog show twice?
is there something like md-selected-item-click?
i want to show dialog when ever user click on result and it happend only once

Upvotes: 1

Views: 296

Answers (1)

Vidyadhar
Vidyadhar

Reputation: 1118

"selectedItemChange" function involved twice when user selected auto complete value(item) & "self.selectedItem = '';". Add a check inside "selectedItemChange" function whether "item" value is empty or undefined.

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 = '';

}

The above code should work & will see only one dialog. And if item that passed to dialog is still empty then pass copy of item to dialog. ie.., Angular.copy(item) or Object.assign({},item)

Upvotes: 1

Related Questions