如何使用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將新值添加到列表中？

回答

相關問題