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

Angular Material “md-chips”指令如何控制选择的输入字段集中在非芯片容器上？

芯片模板:

<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

如何选择芯片时使输入字段聚焦，而不是使芯片容器自身聚焦。尝试编辑数字值，您将理解我的意思。

最佳答案

这是一个解决方案:

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-在选择事件处理程序中，您强制焦点:
self.selectChip = (data) => { if(data) document.getElementById(data.$$hashKey).focus();}