ng-Modell nicht meine Objektwerte aktualisieren

Ich habe eine einseitige Anwendung mit angularJS. Ich habe in meinem Controller ein Benutzerobjekt wie folgt definiert:ng-Modell nicht meine Objektwerte aktualisieren

this.user = { 
    'name':'Robert', 
    'age':'30' 
}

ich ein Formular gemacht, diese Informationen mit denen Benutzer-Informationen auf meiner Seite so wie diese vorbelegt zu aktualisieren:

<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate> 
    <label for="name">Name *</label> 
    <input type="text" name="name" ng-model='pageCtrl.user.name' class="form-control" required/> 

    <label for="age">Age *</label> 
    <input type="text" name="age" ng-model='pageCtrl.user.age' class="form-control" required/> 

    <span ng-if='!userForm.$valid' class="error">Invalid form</span> 
    <input type="submit" value="Save my informations" class="btn btn-success"/> 
</form>

Mein Problem ist, Folgendes: In der Kopfzeile der Seite wird der Benutzername angezeigt ({{pageCtrl.user.name}}). Wenn der Benutzer das Formular bearbeitet, indem er seinen Namen ändert, wird dieser aktualisiert, bevor das Formular gespeichert wird. Ich würde gerne auf die Formularübergabe warten, um den Benutzernamen aktualisiert zu sehen. Aber ich möchte immer noch mein Formular mit den Benutzerinformationen gefüllt bekommen.

Haben Sie eine Idee, wie das geht?

Danke von vorab

Quelle

2016-03-29 Kamzz

Nur pageCtrl.user.name um so etwas wie pageCtrl.user.saved_name ändern und Aktualisieren Sie pageCtrl.user.saved_name, nachdem die Übermittlung erfolgreich war. –

in der Kopfzeile verwenden Sie so etwas wie pageCtrl.updatedUser.name und setzen Sie innerhalb des Controllers und nach dem Formular absenden pageCtrl.updatedUser = pageCtrl.user – Vanojx1

Sie können dies erreichen mit ** ng-if ** auch. Verwenden Sie den booleschen Wert, um zu überprüfen, ob das Formular gesendet wurde oder nicht, und zeigen Sie dann den Benutzernamen in der Kopfzeile an. –

Sie können ein kopierte Objekt verwenden, um nur die Änderungen zu übernehmen, wenn der Benutzer das Formular speichern:

var app = angular.module('app', []); 
 
app.controller('pageCtrl', function() { 
 
    var vm = this; 
 
    vm.user = { 
 
    'name':'Robert', 
 
    'age':'30' 
 
    }; 
 
    
 
    vm.tmpUser = {}; 
 

 
    vm.update = function() { 
 
    vm.user = angular.copy(vm.tmpUser); 
 
    }; 
 

 
    vm.reset = function() { 
 
    vm.tmpUser = angular.copy(vm.user); 
 
    }; 
 
    
 
    vm.reset(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app" ng-controller="pageCtrl as pageCtrl"> 
 
    <form name="userForm" ng-submit="userForm.$valid" novalidate> 
 
    <label for="name">Name *</label> 
 
    <input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/> 
 

 
    <label for="age">Age *</label> 
 
    <input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/> 
 

 
    <span ng-if='!userForm.$valid' class="error">Invalid form</span> 
 
    <input type="submit" ng-click="pageCtrl.update()" ng-disabled="!userForm.$valid" value="Save my informations" class="btn btn-success" /> 
 
    </form> 
 
    <pre>user = {{pageCtrl.user | json}}</pre> 
 
    <pre>tmpUser = {{pageCtrl.tmpUser | json}}</pre> 
 
</body>

Quelle

2016-03-29 10:11:25

Verwenden Sie Ihre ng-Modell in ein temporäres Objekt zu binden, wie:

this.tmpUser = { 
     'name':'Robert', 
     'age':'30' 
    }

Ihre Form wäre:

<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate> 
    <label for="name">Name *</label> 
    <input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/> 

    <label for="age">Age *</label> 
    <input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/> 

    <span ng-if='!userForm.$valid' class="error">Invalid form</span> 
    <input type="submit" value="Save my informations" class="btn btn-success"/> 
</form>

Behalte dein Benutzerobjekt:

this.user = { 
    'name':'Robert', 
    'age':'30' 
}

Und wenn Sie das Formular abschicken, aktualisieren Sie das Benutzerobjekt.

Quelle

2016-03-29 10:00:29

Lassen Sie uns sagen, dass dies Ihre Header,

<header><span ng-show="pageCtrl.formSubmitted">{{ pageCtrl.user.name }}</span></header>

Im pageCtrl.userForm (Benutzer) Funktion nur die pageCtrl.formSubmitted wahr machen, sobald Ihr Formular wurde erfolgreich abgegeben wird. Coole Dinge, können Sie diesen Booleschen auch für andere Zwecke verwenden.

Quelle

2016-03-29 10:01:58

ng-Modell nicht meine Objektwerte aktualisieren

Antwort

Verwandte Themen