2

我希望我的角度材料自动完成成为建议列表，而不是要求列表。但是我不确定如何实现，因为它们不是 Angular Material 文档中的明确示例。

在下面的示例中，我的模型是$ctrl.item.category

显然下面的示例是错误的，因为我的模型链接到md-selected-item，但这仅在我选择一个项目时才有效。如果项目不在列表中，我希望用户能够自由输入文本。基本上，自动完成功能在大多数浏览器中已经有效。

我看到很多关于如何禁用此功能的问题，但他们并没有尝试禁用，而是在未选择项目时清理剩余的文本。在这些情况下，如果未选择项目，则模型值为null，但输入中仍保留文本。

如果该人未选择（或未进行匹配），我希望输入的文本作为模型值。

md-autocomplete(
  md-floating-label="Category Name"
  flex="50"
  md-input-name="category"
  md-selected-item="$ctrl.item.category"
  md-search-text="catSearch"
  md-items="category in $ctrl.categories"
  md-item-text="category"
  md-min-length="0"
  md-select-on-match=""
  md-match-case-insensitive=""
  required=""
  )
  md-item-template
    span(md-highlight-text="catSearch" md-highlight-flags="^i") {{category}}

我的选项 ( $ctrl.categories) 是一个字符串数组，['Food','Liqour']我希望用户能够使用其中一个或自由输入Tables作为他们的选择。

4

2 回答 2

2

为了改进@masitko的答案，我以某种方式实现了过滤器，它将查询添加到过滤列表中。所以它变得可选择和有效的选项。因此，可以将自动完成设置为建议框。

我在我的项目中使用 ES6。但它应该很容易适应 ES5 代码。

myFilter() {
    if (!this.query) return this.items;

    const
        query = this.query.toLowerCase(),
        // filter items where the query is a substing
        filtered = this.items.filter(item => {
            if (!item) return false;
            return item.toLowerCase().includes(query);
        });

    // add search query to filtered list, to make it selectable 
    // (only if no exact match).
    if (filtered.length !== 1 || filtered[0].toLowerCase() !== query) {
        filtered.push(this.query);
    }

    return filtered;
}
于 2016-10-12T10:59:07.277 回答
2

在这种情况下，您应该将md-search-text链接到您的模型。

如果要实现模糊搜索，则必须自己编写过滤器方法。看这个例子：

模板：

  <md-autocomplete
    md-items="item in $ctrl.itemsFilter()"
    md-item-text="item.label"
    md-search-text="$ctrl.query"
    md-selected-item="$ctrl.selected"
    >
    <md-item-template>
      <span md-highlight-text="$ctrl.query">{{item.label}}</span>
    </md-item-template>

     <md-not-found>
        No item matching "{{$ctrl.query}}" were found.
     </md-not-found>        

   <div ng-messages="$ctrl.myValidator($ctrl.query)">
      <div ng-message="short">Min 2 characters</div>
      <div ng-message="required">Required value</div>
    </div>

  </md-autocomplete>

控制器：

var items = [ ... ];
ctrl.itemsFilter = function itemsFilter() {
    return ctrl.query ? filterMyItems(ctrl.query) : items;
};
ctrl.myValidator = function (value) {
  return {
    short: value && value.length < 2,
    required : value && value.length < 1,
  };
};

那么你只需要添加 filterMyItems 方法来过滤你的项目

于 2016-06-16T08:09:27.143 回答