angular.js - ng-show expression dynamic display

Question

form input input box
Click the search box to display the prompt content. Click elsewhere and the prompt content disappears

See the code below

<form class="form-horizontal" name="checkForm">
    <p class="form-group">
        <label class="col-sm-3 control-label">用 户 名</label>
        <p class="col-sm-8 account">
            <input type="text" class="form-control showHide" placeholder="您的账户名和登录名"
                ng-model="account"
                name="account"
                required="required"
                ng-pattern="regularList.account"
                ng-blur="checkForm.account.$blured = true;"
                ng-focus="checkForm.account.$blured = false;"
                autocomplete="off"/>
            <span ng-class="{'right':(checkForm.account.$error.pattern),'error':checkForm.account.$valid}"></span>
        </p>
    </p>
    <p class="tip-container"  ng-show="checkForm.account.$blured">
        <p class="input-tip">
            <i></i>
            <span>!支持中文、字母、数字、“-”“_”的组合，4-20个字符</span>
        </p>
    </p>
</form>

See the specific effects below

When I click on the search box, the prompt content displays

Please give me some guidance, thank you

Answer 1

Are the expressions of ng-blur and ng-focus written backwards? Is it necessary to add $blured to the variable? Any variable can mark whether it has focus. You can take a look.