Question

Angular Material“md-chips”指令如何控制select上的输入字段而不是芯片容器？

芯片模板：

<md-chips name="limits" md-autocomplete-snap=""
          ng-model="ctrl.selectedVegetables"
          md-transform-chip="ctrl.transformChip($chip)"
          md-require-match="ctrl.autocompleteDemoRequireMatch" 
          md-enable-chip-edit="true"              
          >

  <md-autocomplete md-min-length="0"
                   md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" 
                   md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" 
                   placeholder="Search for a vegetable" md-no-cache="true">
      <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
  </md-autocomplete>     

  <md-chip-template>

    <label>{{$chip.name}}</label>      
    <input required type="number" ng-model="$chip.change" step="0.01"/>
    <md-icon style="margin-top: -6px"> %</md-icon>

  </md-chip-template>
</md-chips>

有工作示例： enter link description here

如何选择芯片时，输入区域是聚焦的，而不是芯片容器。尝试编辑数字值，你就会理解我的意思。

Answer 1

这是一个解决方案：

1-为您想要关注的输入添加ID，为唯一我将此ID设置为chip.$$hashkey：

<input type="number" step="0.01" required ng-model="$chip.change" ng-attr-id="{{$chip.$$hashKey}}" style="padding-left: 3px; margin-left: 3px" />

2-在select事件处理程序中，强制关注：

self.selectChip = (data) => { if(data) document.getElementById(data.$$hashKey).focus(); }

Angular Material“md-chips”指令如何在select上控制输入字段而不是芯片容器？

1 个答案: