代码之家 › 专栏 › 技术社区 › systemdebt

动态添加新的md自动完成元素

angular-material angularjs

systemdebt · 技术社区 · 7 年前

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

如何在此处创建动态搜索文本和选定项变量?我希望这些自动完成的元素是不同的,但无法找到在字符串中传递动态名称的方法。

1 回复 | 直到 7 年前

Shantanu 7 年前

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

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

以下是plunker示例的链接: https://plnkr.co/edit/hcBtQ45GUY15XUOfjEUr?p=preview

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

6 年前

The Fox · “角度材质”对话框:复选框始终返回false

6 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

6 年前