angularjs - AngularJS：两个带有单独 ngModel 的输入，一个更新另一个的值

Question

我试图有两个单独的输入字段，每个都有自己的模型，其中一个默认更新另一个的值。

<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。因此，用户名输入保持为空，直到明确输入。

有没有办法按照这些思路做到这一点，还是需要特殊指令或其他什么？

Answer 1

不要使用value：

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

$watch在您的控制器中使用：

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

小提琴