Angular Material Design - 使用自动完成创建新芯片答案

【问题标题】：Angular Material Design - Creating a new Chip with AutocompleteAngular Material Design - 使用自动完成创建新芯片
【发布时间】：2016-06-21 03:24:38
【问题描述】：

我正在使用 Angular Material Design。我有一个包含一组自动完成术语的字段。此列表是通过 api 调用拉入的。

但是，如果用户决定创建一个新标题（芯片），我将使用 md-transform-chip="vm.transformChip($chip)"。

现在，当找到新芯片时，我想通过 api 调用创建职位名称，然后返回响应并将其作为新芯片。

但是，我发现，如果我进行 api 调用并在成功回调中返回芯片，它总是一个空芯片。如果我不调用 api 而只是返回新芯片，它会正确显示。

例如。它不起作用：

function transformChip(chip) {
  // If it is an object, it's already a known chip
  if (angular.isObject(chip)) {
   return chip;
  }

  api.jobTitles.create.save({'site_id': vm.site_id}, { name: chip },
    // Success
    function (response) {
      vm.jobTitles.push(response);
      return { name: response.name, _id: response._id}                          
    },

    // Error
    function (response) {
    }
  );
}

例如。从 Angular Material Design 的网站中提取，它确实可以工作。

function transformChip(chip) {
  // If it is an object, it's already a known chip
  if (angular.isObject(chip)) {
    return chip;
  }

  return { name: chip, type: 'new' }   
}

我的目标是在提交表单之前创建新的芯片并将新芯片添加到作业标题数组中，这样，任何新的提交都会有用于预先输入的芯片。

感谢您的帮助。

【问题讨论】：

标签： angularjs material-design

【解决方案1】：

您只需在推送新职位后return null。您可能希望放置一些加载元素来禁用输入，直到请求结束，因为如果请求需要时间，用户将在结束之前什么也看不到。我宁愿只禁用输入，直到请求结束并且元素已成功推送到范围内。

如果您检查文档中的属性表，您会发现

https://material.angularjs.org/latest/api/directive/mdChips

【讨论】：