Ad

How To Add Class To The Element Using Angular's NgFocus Directive (or Any Directive Embedded In Ionic Framework) At Input In A Template?

- 1 answer

I have a template like this:

    <label class="item item-input"
           ng-class="{'focus':authData.username.focus}"> <--add class here if input:focus
        <span class="input-label">Username</span>
        <input type="text"
               name="username"
               ng-model="authData.username"
               ng-focus="" <--check if focus
               required ng-minlength="5" ng-maxlength="20">
    </label>

How can I check if input has focus and add a class to label? Is it possible without a external function in controller?

Ad

Answer

<label class="item item-input"
           ng-class="{'focus':focus===true}">
        <span class="input-label">Username</span>
        <input type="text"
               name="username"
               ng-model="authData.username"
               ng-focus="focus=true" ng-blur="focus=false"
               required ng-minlength="5" ng-maxlength="20">
    </label>

Use ngFocus and ngBlur directives to detect focus change on element and update the value of a var focus to true/false accordingly.

Ad
source: stackoverflow.com
Ad