Angularjs form is readonly. Why?

Question

How I define my app in html:

<div ng-app="md-app">
    <div id="general">
        <ng-include src="template1" ng-controller="GeneralCtrl"></ng-include>
    </div>
</div>

The js to fetch a person from rest and set template:

function GeneralCtrl($scope, $http, $location) {
    $scope.template1 = 'some_path';

    $scope.person = $http.get('route', {id: personId})).then(function(response){
        return response.data;
    }); 
}

In the template I can read all data. I have a form to edit some data of the person, however the form is readonly by default:

 <form>
     <div class="form-group">
         <input type="text" class="form-control" ng-model="person.nick"/>
     </div>
 </form>

The nickname of the person is displayed in the input field, but I cannot edit it. When I start typing it is just ignored. Why?

Try using .success() instead of .then()

Zack Argyle
– Zack Argyle

2013-08-09 18:05:08 +00:00
Commented Aug 9, 2013 at 18:05 — Zack Argyle
– Zack Argyle, Commented Aug 9, 2013 at 18:05

amakhrov · Accepted Answer · 2013-08-09 18:09:40Z

2

$http.get doesn't return data to your model, as it is asynchronous. It returns the Promise object. You need to assign the resulting value to $scope.person in the .success() callback:

$scope.person = {};
$http.get('route', {id: personId})).success(function(response){
    $scope.person = response.data;
});

Please see the documentation for $http with examples

answered Aug 9, 2013 at 18:09

amakhrov

3,9691 gold badge15 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Angularjs form is readonly. Why?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related