動的に新しいmdオートコンプリート要素を追加する

Question

<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> 

ここで動的検索テキストと選択したアイテム変数を作成するにはどうすればよいですか？私はこれらの自動完全な要素を区別したいが、文字列に動的な名前を渡す方法を理解することはできない。

Answer 1

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