1

I have a small search bar which is hidden initally. With a ng-click i set "filter.show" to true and the searchbar becomes visible. As soon as this happens i want the text input inside to be focused automatically.

I'm using Angular 1.5 and Angular Material and found the focus-me option as presented below. But this doesn't work somehow and I don't understand what's the problem. Maybe someone can help me.

The html presented below uses the same controller for the button and the input.

<md-toolbar class="md-table-toolbar md-default" ng-show="filter.show && !selected.length" aria-hidden="false">
  <div class="md-toolbar-tools">
    <md-icon md-svg-icon="magnify"></md-icon>
    <form flex="" name="filter.form">

      <md-input-container class="md-block" flex="" style="margin-bottom:0">
        <label>Search</label>
        <input type="text" focus-me="filter.show" ng-model="query.filter" ng-model-options="filter.options" aria-invalid="false">
      </md-input-container>

    </form>
    <button class="md-icon-button md-button md-ink-ripple" type="button" ng-click="removeFilter()">
      <md-icon md-svg-icon="close"></md-icon>
      <div class="md-ripple-container"></div>
    </button>
  </div>
</md-toolbar>
Hadi J
  • 16,989
  • 4
  • 36
  • 62
juleee
  • 456
  • 1
  • 7
  • 20
  • Can we see your "focusMe" directive? Also try using `ng-if` instead of `ng-show` just in case – floribon Apr 09 '16 at 10:13
  • you mean, the focus-me is no angular build in directive? If so, is there a way to achieve auto-focusing with angular by default? – juleee Apr 09 '16 at 10:21
  • There's no built-in way to do it, but you can find good implementations of such "focus-me" directives everywhere http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field – floribon Apr 09 '16 at 11:17

0 Answers0