AngularJS : Deux entrées avec des ngModel séparés, l'une mettant à jour la valeur de l'autre.

Question

J'essaie d'avoir deux champs de saisie séparés, chacun avec son propre modèle, l'un d'eux mettant à jour la valeur de l'autre par défaut.

<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>

Ainsi, si vous saisissez votre adresse électronique, l'entrée du nom d'utilisateur sera remplie automatiquement avec celle-ci, bien que le nom d'utilisateur puisse être modifié si vous le saisissez spécifiquement.

Mais ça ne marche pas. Au lieu de cela, le ng-model="username" remplace la valeur attr, indépendamment de ce qui est défini ici. Ainsi, l'entrée du nom d'utilisateur reste vide jusqu'à ce qu'elle soit explicitement tapée.

Existe-t-il un moyen de procéder de cette manière, ou cela nécessite-t-il une directive spéciale ou autre ?

Answer 1

N'utilisez pas value :

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

Utilisez $watch dans votre contrôleur :

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

violon