如何在网页中以单一形式和单一控制器实现angular js材质的两个md-autocomplete？

Question

I need two md-autocomplete in one page so according to angular js material document i include two md-autocomplete in my form, ones for vehicle make company name and other for vehicle model but when i choose a vehicle name from first md-autocomplete then second md-autocomplete appear a [object Object] value. So how i will modify its js function?

<!--Html Code-->
<md-autocomplete  required='' ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItem" md-search-text-change="searchTextChange(searchText)" md-search-text="searchTextModel" md-selected-item-change="selectedItemChange(item)" md-items="item in querySearch(searchTextModel)" md-item-text="item.name" md-min-length="0" md-menu-class="autocomplete-custom-template"  md-floating-label="Make">
    <md-item-template>
        <span class="item-title">
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
        <span>{{item.name}}</span>
        </span>
    </md-item-template>
    <div ng-messages="userForm.autocomplete.$error">
        <div ng-message="required">This field is required</div>
    </div>
</md-autocomplete>


<md-autocomplete  required='' ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItemModel" md-search-text-change="searchTextChange(searchText)" md-search-text="searchText"  md-items="item in querySearchModel(searchText)" md-item-text="item.title" md-min-length="0" md-menu-class="autocomplete-custom-template"  md-floating-label="Model">
    <md-item-template>
        <span class="item-title">
        <span> {{item.name}} </span>
        </span>
    </md-item-template>
    <div ng-messages="userForm.autocomplete.$error">
        <div ng-message="required">This field is required</div>
    </div>
</md-autocomplete>




 //Angular js Controller code

  //Auto complete function for car make

  $scope.make=[{id:1,name:"Audi"},{id:2,name:"BMW"},{id:3,name:"Ferrari"}];
  $scope.selectedItem  = null;
  $scope.searchText    = null;
  $scope.querySearch   = querySearch;


   function querySearch (query) {

          var results = query ? $scope.categories.filter(createFilterFor(query)) : $scope.make,
                        deferred;
                    if (self.simulateQuery) {
                        deferred = $q.defer();
                        $timeout(function () {
                            deferred.resolve(results);
                        }, Math.random() * 1000, false);
                        return deferred.promise;
                    } else {
                        return results;
                    }

   }

   function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(Make) {
        //alert(state);
        //console.log(state);
        return (Make.name.toLowerCase().indexOf(lowercaseQuery) === 0);
      };

    }


   //Auto complete function for car models
   $scope.model=[{mid:1,id:1,name:"Q3"},{mid:2,id:1,name:"Q6"},{mid:3,id:1,name:"Q2"}];
   $scope.selectedItemModel  = null;
   $scope.searchTextModel    = null;
   $scope.querySearchModel=querySearchModel;


   function querySearchModel (query) {

          var results = query ? $scope.model.filter(createFilterFor(query)) : $scope.model,
                        deferred;
                    if (self.simulateQuery) {
                        deferred = $q.defer();
                        $timeout(function () {
                            deferred.resolve(results);
                        }, Math.random() * 1000, false);
                        return deferred.promise;
                    } else {
                        return results;
                    }

   }


   function createFilterForModel(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(Model) {
       return (Model.name.toLowerCase().indexOf(lowercaseQuery) === 0);
      };

    }

Answer 1

I also had a similar issue and found your question. On the first autocomplete you call searchTextChange(searchText) , but searchText is from the second autocomplete, while in the first you called it searchTextModel .

---

I found this because I had a problem on which multiple autocomplete on the same page where sharing the value. Your question help me found a solution. While in Bootstrap's typeahead you use $viewValue for any typeahead, on mdAutocomplete you specify which model to bind the searchText, and thus, you cannot use the same binding on all autocompletes, you have to have one for each.