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

Question

我需要在一个页面中有两个md-autocomplete，所以根据角度js材料文档我在我的表单中包含两个md-autocomplete，一个用于车辆公司名称和其他用于车辆模型但是当我从第一个md-autocomplete选择车辆名称时第二个md-autocomplete显示[object Object]值。那么我将如何修改其js功能呢？

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

我也有类似的问题，并找到了你的问题。在第一次自动完成时，你调用searchTextChange(searchText)，但searchText来自第二次自动完成，而在第一次你称之为searchTextModel。

---

我发现这是因为我遇到了一个问题，在同一页面上共享值的多个自动完成。你的问题帮助我找到了解决方案。在Bootstrap的typeahead中，你使用$viewValue进行任何类型的前导，在mdAutocomplete上你指定了哪个模型来绑定searchText，因此，你不能在所有自动复合体上使用相同的绑定，你必须为每个自动复合提供一个。