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

我想使用md-autocomplete来搜索数组中的对象。如果找到对象，我想要填充编辑表单，但如果找不到对象，我希望用户能够使用相同的表单添加新对象。例如，我有一组联系人：[{name: string, email: string}...]。如何使用md-autocomplete将新值添加到列表中？

然后在我的模板：

<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值变为一个对象。

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

来源

2016-03-04 kpg

控制器代码？ –

-1

我做了一个简单的例子。

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:'[email protected]'}, 
    {name: 'Renan', email:'[email protected]'}, 
    {name: 'Renan', email:'[email protected]'} 
    ]; 

    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>

来源

2016-03-04 17:13:12

示例不起作用。我在这篇文章中使用了小提琴，并在爱德华打字，并且名字保持为Renan。 – Meeker

-1

对于那些谁正在寻找以达到相同的检查这个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) 

}

来源

2017-04-03 09:22:20 ANinJa

而不是downvoting可以请你过来告诉这种方法有什么问题，这样我们都可以学习正确的方式 – ANinJa

嗯，首先。什么是'actualLength'和'currentLength'？其次，你为什么拼接'contactArray'然后推到'contacts'数组？ – fuzz

为什么不使用控制器内MD-搜索文本值，然后做，不管你想要的值...例如：

md-search-text="searchString"

Ctrl键：

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

不知道如果这是你需要什么...

来源

2018-01-10 14:02:58

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

回答

相关问题