動態添加新的md自動完成元素

<div layout="row" ng-repeat="choice in choices"> 
     <md-autocomplete 
      ng-disabled="autoCompleteOptions.isDisabled" 
      md-no-cache="autoCompleteOptions.noCache" 
      md-selected-item="autoCompleteOptions.selectedItem" 
      md-search-text="autoCompleteOptions.searchText" 
      md-items="item in querySearch(fabrics, autoCompleteOptions.searchText, 'fab_id')" 
      md-min-length="0" 
      md-item-text="item.fab_id" 
      placeholder="Search for a Fabric here"> 
     <md-item-template> 
      <span md-highlight-text="autoCompleteOptions.searchText" md-highlight-flags="^i">{{item.fab_id}}</span> 
     </md-item-template> 
      <md-not-found> 
      No FabIds matching "{{autoCompleteOptions.searchText}}" were found. 
      </md-not-found> 
     </md-autocomplete> 
</div>

如何在此處創建動態搜索文本和所選項目變量？我希望這些自動完成的元素是不同的，但不能找出一種方法來傳遞字符串中的動態名稱。動態添加新的md自動完成元素

來源

2017-07-29 Simran kaur

您可以選擇一個對象數組，對於ng-repeat循環的每次迭代，choice是對choices數組中的對象的引用。您可以在該陣列中擁有諸如searchText,selectedItem,fieldName之類的屬性。我已經建立了我自己的例子來解決你的問題，所以你的等效模板可以是：

<div ng-repeat="choice in ctrl.choices"> 
    <md-autocomplete 

     md-selected-item = "choice.selectedItem" 
     md-search-text-change = "ctrl.searchTextChange(choice.searchText)" 
     md-search-text = "choice.searchText" 
     md-selected-item-change = "ctrl.selectedItemChange(item)" 
     md-items = "item in ctrl.querySearch(choice.searchText)" 
     md-item-text = "item.display" 
     md-min-length = "0" 
     placeholder = "US State? {{choice.fieldName}}"> 

     <md-item-template> 
     <span md-highlight-text = "choice.searchText" 
      md-highlight-flags = "^i">{{item.display}}</span> 
     </md-item-template> 

     <md-not-found> 
     No states matching "{{choice.searchText}}" were found. 
     </md-not-found> 
    </md-autocomplete> 
</div>

而且在需要的項目teplate數據的其他功能一起控制器，有這樣的：

this.choices = [{searchText: '', selectedItem: '', fieldName: 'Field 1'}, 
      {searchText: '', selectedItem: '', fieldName: 'Field 2'}, 
      {searchText: '', selectedItem: '', fieldName: 'Field 3'}];

這裏的鏈接例如：https://plnkr.co/edit/hcBtQ45GUY15XUOfjEUr?p=preview

來源

2017-07-30 16:53:34 Shantanu

動態添加新的md自動完成元素

回答

相關問題