md-autocomplete选择空项显示[Object Object]问题求助

我来帮你搞定这个问题！你遇到的是md-autocomplete默认处理选中项显示的逻辑问题——当选中那个空对象时，组件不知道该如何把对象转换成可读文本，就直接输出了对象的默认字符串形式[Object Object]。下面给你两种简单有效的解决方法：

方法一：使用md-display-function（推荐） #

这是Angular Material专门提供的、用来定义选中项在输入框中显示文本的配置项，直接解决核心问题：

1. 在你的md-autocomplete标签里添加这个属性：

md-display-function="getDisplayText(item)"

2. 在控制器中定义对应的处理函数：

$scope.getDisplayText = function(item) {
  // 存在item则返回其display属性，否则返回空字符串
  return item ? item.display : '';
};

这样不管选中的是空项还是其他颜色项，输入框都会正确显示对应的display值，空项就会显示空白，再也不会出现[Object Object]了。

方法二：通过md-selected-item-change手动处理 #

如果你更倾向于手动控制选中后的行为，也可以监听选中项变化事件来更新显示：

1. 在md-autocomplete标签添加事件监听：

md-selected-item-change="handleItemSelect(item)"

2. 在控制器中实现处理函数：

$scope.handleItemSelect = function(item) {
  // 直接把输入框的显示文本设置为item的display值（空项则为空）
  $scope.searchText = item ? item.display : '';
};

完整示例片段 #

给你贴一个整合了方法一的完整代码片段参考：

<md-autocomplete
  md-selected-item="selectedItem"
  md-search-text="searchText"
  md-items="item in colorItems"
  md-item-template="<span md-highlight-text='searchText'>{{item.display}}</span>"
  md-display-function="getDisplayText(item)"
  md-min-length="0"
  placeholder="选择颜色">
</md-autocomplete>

$scope.colorItems = [ 
  {value: '', display: ''}, 
  {value: 'white', display: 'White'}, 
  {value: 'green', display: 'Green'}, 
  {value: 'orange', display: 'Orange'} 
];

$scope.getDisplayText = function(item) {
  return item ? item.display : '';
};

原理很简单：md-display-function会在选中项时被调用，我们只需要返回想要展示的文本内容即可，完美适配你的空项场景。

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