在文本输入中的每个按键上调用AngularJS $watch

发布时间：2020-12-17 17:30:53 所属栏目：安全来源：网络整理

导读：我有一个网页,我从服务器收到的动态json数据构建表单.我不久前用KnockoutJS开发了它.在构建表单之后,我还需要通过从服务器执行ajax请求来更新表单,每次更改表单中的值.这是 fiddle 你看,改变事件只发生在模糊上(不是在按键上).例如,如果文本字段的值为15,并

我有一个网页,我从服务器收到的动态json数据构建表单.我不久前用KnockoutJS开发了它.在构建表单之后,我还需要通过从服务器执行ajax请求来更新表单,每次更改表单中的值.这是 fiddle
你看,改变事件只发生在模糊上(不是在按键上).例如,如果文本字段的值为15,并且用户按退格键然后再次输入5,则表示2次按键但值尚未更改.到现在为止还挺好.

问题1
现在我将代码转换为AngularJS.我试图通过观察范围来捕捉变化事件.但是,看起来每次按键发生时都会运行手表,即使几次按键值没有改变.这是我尝试的fiddle.但是,此问题仅适用于文本类型输入字段.

问题2
我正在以手动方式创建无线电组,例如如果更改了json数据,那么我们也必须更新html.我怎么能以一种动态的方式做到这一点.我能够用KnockoutJS做到这一点.

问题3
为什么ng-hide不起作用？

解决方法

修复问题1是引入模糊事件的指令,以下是我的指令的代码：

angular.module('app',[]).directive('ngModelOnblur',function () {
return {
    restrict: 'A',require: 'ngModel',link: function (scope,elm,attr,ngModelCtrl) {
        if (attr.type === 'radio' || attr.type === 'checkbox') return;

        elm.unbind('input').unbind('keydown').unbind('change');
        elm.bind('blur',function () {
            scope.$apply(function () {
                ngModelCtrl.$setViewValue(elm.val());
            });
        });
    }
};

});

你可以在这里看到工作小提琴http://jsfiddle.net/akeelrehman/GNJtn/1/

我无法找出问题2的解决方案,所以我已经停止使用无线电输入.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!