javascript - 使用 AngularJS 隐藏表单上的输入帮助

标签 javascript jquery angularjs

我目前正在学习 AngularJS,我想完成一个简单的任务。 在表单输入上,即使输入中输入的数据无效,我也想隐藏相应的“输入帮助”。 我目前执行此操作的方式会调用一些 jquery。但我正在寻找使用 AngularJS 逻辑来做到这一点的方法。我认为我应该使用指令,但由于我是 Angular 新手,我不知道到底该怎么做。

这里是使用 jquery 的 jsFiddle 示例代码:JSFIDDLE

这里是 jsFiddle 示例代码不工作(没有 jquery):JSFIDDLE {为了测试,在密码输入中只输入几个文本并将其模糊}

这是我的代码:{jquery}

$(document).on('blur', '.immediate-help', function () {
    $(this).next('.input-help').fadeOut();
}).on('focus', '.immediate-help', function () {
    $(this).next('.input-help').fadeIn();
});

这按预期工作,但我想使用 Angular Directive(指令)来做到这一点。当然,我并不反对在 Angular 指令中使用 jquery。

因此,要恢复,我希望在触发模糊输入时隐藏“输入帮助”,即使文本无效并使用 Angular Directive(指令)。

有人可以告诉我正确的方法吗?

最佳答案

几种方法:

在指令中使用脚本:

如果 jQuery.js 在页面中的 anugular.js 之前加载,则指令 link 回调中的

elm 参数是一个 jQuery 对象...或者如果 jQuery.js 则它是一个 jQlite不包含。

jQlite 有许多最常见的 jQuery 方法,因此您可以使用:

elm.bind('blur....

参见angular.element docs 获取 jQlite 方法列表。

使用ng-class

给表单和控件一个名称。这将创建一个对象 formName ,其属性由字段名称表示。然后,您可以在标记中使用类的 Angular 表达式或诸如 disabled 之类的属性

<form name="myForm">
    <input name="passord"/>
    <div ng-class="{ShowMeClassName: myForm.password.$invalid}"> Error content</div>
</form>

ng-class 将根据名为 myForm 的表单中名为 password 的字段的有效性来切换类 ShowMeClassName

关于javascript - 使用 AngularJS 隐藏表单上的输入帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16057873/

相关文章:

angularjs - AngularFire - 删除单个项目

javascript - 没有模拟 $http 的 Angular Testing

javascript - 如果javascript中验证失败如何停止表单提交

javascript - 由于 getWidthOrHeight 函数导致 jQuery 脚本无响应

jquery、数据属性、 Bootstrap 模式

javascript - 在 Angular 1.5 组件中处理焦点和模糊事件

javascript - 未捕获的类型错误 : Cannot read property 'outerHTML' of null

javascript - 如何在 jQuery 中的课后将课添加到 div?

javascript - Bootstrap Popover 在任何点击时关闭

angularjs - 使用 Angular 2 Typescript 设置 http header