如何使用md-autocomplete向列表添加新值？

Question

我想使用md-autocomplete在数组中搜索对象。如果找到了对象，我希望填充一个编辑表单，但如果没有找到对象，我希望用户能够使用相同的表单添加一个新的表单。

例如，我有一个联系人数组：[{name: string, email: string}...]。

然后在我的模板中：

<md-autocomplete       
  md-selected-item="$ctrl.newContact"
  md-search-text="$ctrl.searchString"
  md-selected-item-change="$ctrl.selectedItemChanged(item)"
  md-items="item in $ctrl.getContactsByFullName($ctrl.searchString)"
  md-floating-label="Contact's Name"
  md-item-text="item.fullName">
</md-autocomplete>
<md-input-container>
  <label>Email</label>
  <input type='email' ng-model='$ctrl.newContact.email/>
</md-input-container>

当我在Contact's name中输入一个新值，按tab键切换到电子邮件，并在电子邮件中输入一个值时，$ctrl.newContact.fullName的值就变成了一个对象。

我在这里做错了什么？我一直在摆弄和依赖代码，但似乎不能正确处理。有没有人有一个实用的例子？

Answer 1

为什么不在控制器中使用md-search-text值，然后使用desire...Something喜欢的任何值：

  md-search-text="searchString"

Ctrl：

console.log($scope.searchString);
//You can do with the value whatever you want!

不确定这是否是你所需要的。

Answer 2

我举了一个简单的例子。

https://jsfiddle.net/relferreira/faqsg514/1/

您所做的错误是将所选项目定义为$ctrl.newContact，而将每个项目定义为Object。

控制器

angular.module('app', ['ngMaterial']);

angular.module('app')
    .controller('MainCtrl', mainCtrl);

 function mainCtrl(){
    var vm = this;
  vm.newContact = {};
  vm.searchString = '';
  vm.selectedItemChanged = selectedItemChanged;
  vm.getContactsByFullName = getContactsByFullName;

  vm.contacts = [
    {name: 'Renan', email:'asldfk@.com'},
    {name: 'Renan', email:'asldfk@.com'},
    {name: 'Renan', email:'asldfk@.com'}
  ];

  function selectedItemChanged(){
    vm.newContact.fullName = vm.selectedContact.name;
  }

  function getContactsByFullName(name){
    return vm.contacts;
  }
 }

HTML

<div ng-app="app">

  <div data-ng-controller="MainCtrl as mainVm">
    {{mainVm.newContact}}
    <md-autocomplete       
      md-selected-item="mainVm.selectedContact"
      md-search-text="mainVm.searchString"
      md-selected-item-change="mainVm.selectedItemChanged()"
      md-items="item in mainVm.getContactsByFullName($ctrl.searchString)"
      md-floating-label="Contact's Name"
      md-item-text="item.name">
        <md-item-template>
          <span md-highlight-text="mainVm.searchString">{{item.name}}</span>
      </md-item-template>
      </md-autocomplete>
      <md-input-container>
        <label>Email</label>
        <input type='email' data-ng-model="mainVm.newContact.email"/>
      </md-input-container>
  </div>
</div>

Answer 3

对于那些希望实现相同目标的人，请查看此fiddle

方法：基本上是在md-search-text-change事件发生时附加一个新模型，并删除垃圾模型。

html代码

<md-autocomplete 
...
md-search-text="searchString"
md-search-text-change="selectedItemChanged(searchString)
...
</md-autocomplete>

角度代码

function selectedItemChanged(searchString){
  vm.contactArray.splice(actualLength,currentLength-actualLength)
  vm.newModel = {};
  vm.newModel.name=searchString;
  vm.newModel.email='test'
  vm.contacts.push(vm.newModel)

}