javascript - 如何在模板的输入中使用 Angular 的 ngFocus 指令(或嵌入在 Ionic Framework 中的任何指令)向元素添加类？

Question

这个问题在这里已经有了答案:





Angular.js: Set CSS when Input is on Focus

(3 个回答)


5年前关闭。




我有一个这样的模板:

    <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>

如何检查输入是否具有焦点并将类添加到标签？ Controller 中没有外部功能是否可能？

Answer 1

<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>

使用 ngFocus 和 ngBlur 指令来检测元素上的焦点变化并更新 var focus 的值相应地为真/假。