2017-02-08 11 views
3

Директива о угловом материале «md-chips», как управлять этим полем ввода при выборе, была сосредоточена не на чип-контейнере?Директива о угловом материале «md-chips», как управлять этим полем ввода при выборе, была сосредоточена не на чип-контейнере?

Chip шаблон:

<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- Добавить идентификатор для входа вы хотите быть сосредоточенным, чтобы быть уникальным я зададим этот идентификатор, чтобы быть 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(); }

+0

Спасибо, это работает :) – Drasius

 Смежные вопросы

  • Нет связанных вопросов^_^