AngularJS:两个带有单独ngModel的输入,一个更新其他值

时间:2013-05-06 23:09:03

标签: angularjs

我正在尝试使用两个单独的输入字段,每个输入字段都有自己的模型,其中一个输出字段默认更新另一个值。

<form id="registerForm" ng-submit="create(email, username, password)">
    <input type="text" name="email" placeholder="Email" ng-model="email">
    <input type="text" name="username" value="{{email}}" placeholder="Username" ng-model="username">
    <input type="password" name="password" placeholder="Password" ng-model="password">

    <input type="submit" value="register" class="button" ng-show="!loading">
    <input type="submit" value="processing" class="button" disabled ng-show="loading">
</form>

结果是,如果您输入电子邮件,用户输入将自动填充,但如果特别输入用户名,则可以更改用户名。

但这不起作用。相反,ng-model="username"会覆盖值attr,无论在那里设置什么。因此,用户名输入保持为空,直到明确输入为止。

有没有办法按照这些方式执行此操作,还是需要特殊指令或什么?

1 个答案:

答案 0 :(得分:6)

请勿使用value

<input type="text" name="username" placeholder="Username" ng-model="username">

在控制器中使用$watch

function MyCtrl($scope) {
    $scope.$watch('email', function(value) {
        $scope.username = value
    });
}

fiddle