有AngularJs更新{{结合}}作为用户在输入[邮件] [英] Have AngularJs update {{binding}} as the user types in input[email]

问题描述

角只更新从输入模型[邮件] 用户输入一个有效的电子邮件地址后。我如何添加一个 {{}绑定} 某处的网页，将与电子邮件值作为用户键入更新 - 甚至在用户在有效的电子邮件地址类型？

Angular only updates the model from an input[email] after the user has entered a valid email address. How can I add a {{binding}} somewhere on the page that will update with the email value as the user types -- even before the user has typed in a valid email address?

下面是我到目前为止已经试过：

Here's what I've tried so far:

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email as you type: {{contact.email}} (doesn't work)<br/>
            Also doesn't work: {{$document.forms.MyForm.elements.email.value}}
        </form>
    </div>
</div>

控制器：

function MyCtrl($scope) {
    $scope.contact = {};
}

（小提琴）

在实时像我想要的，但电子邮件没有名称的更新。

The name updates in real-time like I want, but the email doesn't.

我想离开启用电子邮件验证。我只是需要一些方法来未验证的输入[邮件] 文字绑定，所以更新的用户类型。

I'd like to leave the email validation enabled. I just need some way to bind the un-validated input[email] text, so it updates as the user types.

更新2014年7月8日

我想补充一点， TYPE =电子邮件保持不变的明确要求。我不希望改变的标记的语义要解决的框架的限制。如果需要的话，我宁愿拉互补的依赖（如jQuery的），在需要的功能垫片。

I'd like to add an explicit requirement that the type="email" remains unchanged. I do not want to change the semantics of the markup to workaround a limitation of the framework. If need be, I'd rather pull in a complementary dependency (such as jQuery) to shim in the needed functionality.

我不反对在控制器处理验证 - 由rageandqq和charlietfl的建议 - 如果它可以很容易地完成。环顾四周，虽然，它看起来像它可能会非常棘手（给我的要求）。

I'm not opposed to handling validation in the controller — as suggested by rageandqq and charlietfl — if it could be done easily. Looking around though, it looks like it could be tricky (given my requirements).

推荐答案

解决方法，我想出迄今使用jQuery来监听输入变化和更新 $范围，我已经叫 formRaw 的对象。有用。不过，我希望有人会来给我一个更好的办法。

The workaround I've come up with so far is to use jQuery to listen for the input change and update an object on $scope that I've called formRaw. It works. Still, I'm hoping someone will come along and show me a better way.

更新例如：

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email Model: {{contact.email}}<br/>
            Email Form: {{formRaw.email}}
            {{q}}
        </form>
    </div>
</div>

和控制器：

function MyCtrl($scope) {
    $scope.contact = {};
    $scope.formRaw = {};

    $('input[type=email]').on('keyup change', function () {
        var input = $(this);
        $scope.formRaw[input.attr('name')] = input.val();
        $scope.$digest(); // FIXME: there's got to be a better way
    });
}

（小提琴）

这篇关于有AngularJs更新{{结合}}作为用户在输入[邮件]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！