2017-02-08 56 views
3

角度材料「md-chips」指令如何控制select上的輸入字段是否關注芯片容器?角度材料「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

如何使在選擇芯片的輸入域集中而不是芯片容器它的自我。嘗試編輯數字值,你會明白我的意思。

回答

1

這是一個解決方案:

1添加一個id爲要集中投入,是獨一無二的,我會設置這個ID是​​:

<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(); }

+0

謝謝,它的工作原理:) – Drasius