如何在AngularJS Material单表单单控制器中实现两个md-autocomplete并修复显示异常

我来帮你搞定这个问题，你遇到第二个md-autocomplete显示[object Object]的情况，主要是几个细节没对应上，咱们一步步修正：

问题根源与修复点 #

1. md-item-text 属性不匹配 #

第二个md-autocomplete的md-item-text绑定的是item.title，但你的车型数据数组$scope.model里的属性是name，Angular找不到对应属性时就会直接输出对象本身，所以要把这个属性改成item.name。

2. 过滤器函数调用错误 #

在车型的搜索函数querySearchModel里，你误用了品牌的过滤器createFilterFor，应该换成专门为车型写的createFilterForModel，否则过滤逻辑会出错。

3. 品牌搜索函数的变量错误 #

第一个搜索函数querySearch里，你写了$scope.categories.filter，但你的品牌数组是$scope.make，这里要修正为$scope.make.filter，不然会找不到数据。

4. self 变量未定义 #

代码里用到了self.simulateQuery，但没有定义self，可以先把self赋值为$scope，或者直接用$scope.simulateQuery，避免逻辑报错。

修改后的完整代码 #

HTML部分 #

<!--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-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.name" 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>

AngularJS Controller部分 #

//Angular js Controller code
var self = $scope; // 定义self为$scope，避免未定义错误
self.simulateQuery = false; // 可以根据需求设置是否模拟异步查询

//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.make.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) {
 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(createFilterForModel(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);
 };
}

这些修改完成后，第二个md-autocomplete就能正常显示车型名称，而不是[object Object]了。另外如果需要根据选中的品牌动态过滤车型，还可以在selectedItemChange函数里更新$scope.model数组，实现联动效果，比如：

$scope.selectedItemChange = function(item) {
  // 根据选中的品牌id过滤车型
  $scope.model = $scope.allModels.filter(model => model.id === item.id);
};

（记得提前定义$scope.allModels存放所有车型数据）

内容的提问来源于stack exchange，提问作者Sherin Green