AngularJS Scope Variables not Updating

Question

Strange error here. I have this form:

<form name="newaccount" id="newaccount" ng-submit="doSubmit()">
<label>username</label>
<input name="username" type="text" required ng-model="username">
<span ui-toggle="username.length > 15">Too long!</span>
<label>name</label>
<input name="name" type="text" required ng-model="name">
<label>e-mail</label>
<input name="email" type="email" required ng-model="email" ui-validate>
<label>password</label>
<input name="password" type="password" required ng-model="password" ui-validate>
<div style="text-align: center;"><br>
<input type="submit"></div>
</form>

And this controller:

$scope.username = "f";
$scope.password = "f";
$scope.email = "f";
$scope.name = "f";
$scope.doSubmit = function(){
    //Transition to progress view
    $scope.showLoginForm = false;
    $scope.showCreateForm = false;
    $scope.showLoading = true;
    $scope.resultSuccess = false;
    $scope.showResult = false;
    $scope.loadingMessage = "Creating account...";
    $scope.resultReason = "Success!";

    //Send POST
    $http({
        method: 'POST',
        url: "php/createaccount.php",
        data: {
            "username": $scope.username,
            "password": $scope.password,
            "name": $scope.name,
            "email": $scope.email
        }}
    ).success(function (data, status, headers, config) {
            $scope.showLoading = false;
            $scope.showResult = true;
            $scope.resultSuccess = data === "success";
            if($scope.resultSuccess){
                $scope.resultReason = "Account created successfully!";
            }else{
                $scope.resultReason = data;
            }

        }).error(function (data, status, headers, config) {
            $scope.showLoading = false;
            $scope.showResult = true;
            $scope.resultSuccess = false;
            $scope.resultReason = data;
        });
};

As expected, "f" appears in each of the fields. However, if you change these fields and then submit the form, the server responds (with a print_r() on the post data) showing that the JSON received by the backend ALWAYS will contain "f" as the value for each of the fields, not the changed values.

Example: with username "test" etc.

{"username":"f","password":"f","name":"f","email":"f"}

Therefore, the values in $scope aren't getting updated for some reason when I type in the forms. What gives?

is it possible that the code that assigns "f" to the fields runs every time the form is submitted? — akonsu
– akonsu, Commented Jan 13, 2013 at 5:13
perhaps, if I removed that part though nothing is submitted! (literally, no keys or values) — Christian Stewart
– Christian Stewart, Commented Jan 13, 2013 at 5:21
would you be able to set up this code on jsfiddle ? do not have to send the POST, just output to console. — akonsu
– akonsu, Commented Jan 13, 2013 at 5:22
Instead of assigning individual $scope properties inside the $http call, consider using a "large object" on your scope: $scope.person = { username: 'f', ...}. Then you can just post that object. See Dean's blog. — Mark Rajcok
– Mark Rajcok, Commented Jan 14, 2013 at 17:43

Christian Stewart · Accepted Answer · 2013-01-27 22:50:02Z

1

Instead of assigning individual $scope properties inside the $http call, use a "large object" on your scope: $scope.person = { username: 'f', ...}. Then you can just post that object.

It turned out the specific problem in this was that angular does not write values to scope variables unless they validate, in this case email wasn't validating properly.

answered Jan 27, 2013 at 22:50

Christian Stewart

15.5k21 gold badges86 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jirilmon · Accepted Answer · 2013-01-13 12:38:26Z

0

Is the scope clearly defined using 'ng-app' and 'ng-controller'?

I could not find these two directives in your html. Perhaps you didnt include it as part of question.

A sample structure which i expected: http://angularjs.org/#todo-html

answered Jan 13, 2013 at 12:38

Jirilmon

1,9441 gold badge12 silver badges13 bronze badges

1 Comment

Christian Stewart Over a year ago

The code you see here is within a ng-view, within a ng-app directive. The controller is defined in app.js. I can confirm the controller is working because the methods in the controller are being called.

Collectives™ on Stack Overflow

AngularJS Scope Variables not Updating

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related