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中输入新值时，选中要发送电子邮件并在电子邮件中输入值，$ctrl.newContact.fullName的值就会成为对象。

我在这里做错了什么？我已经摆弄和编码，但似乎无法做到正确。有人有一个有效的例子吗？

Answer 1

为什么不在控制器中使用md-search-text值，然后按照你想要的那样使用值......如下：

  md-search-text="searchString"

控制：

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)

}

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

3 个答案: