javascript - 如何在网页中以单一表单和单一 Controller 实现 Angular js Material 的两个md-autocomplete？

Question

我在一页中需要两个 md-autocomplete，因此根据 Angular js Material 文档，我在表单中包含两个 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 进行任何 typeahead，而在 mdAutocomplete 上，您可以指定绑定(bind) searchText 的模型，因此，您不能在所有自动完成上使用相同的绑定(bind)，每个人都必须有一个。