BluePrint BluePrint - 4 years ago 150
Javascript Question

Filling data in form using angular

I am a true beginner at Angular (but not JS), started yesterday, so I hope you forgive me if this question sound stupid. Consider the following small application:

HTML:

<!doctype html>
<html ng-app="todoApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/js/TestController.js"></script>
</head>
<body ng-controller="TestController as myControl">
<div id="overlaybox">
<button ng-click="myControl.showUpd(4)">Test</button><br/><br/><br/>

<form ng-submit="myControl.updTodo()">
Note:<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="noteupd.content"></textarea><br/>
Deadline (format YYYY-MM-DD HH:MM):<br/>
<input type="text" id="updDeadline" ng-model="noteupd.deadline" /><br/>
Completed:
<input type="checkbox" id="updCompleted" ng-model="noteupd.completed" /><br/>
<input type="hidden" id="updID" ng-model="noteupd.id" /><br/>
<input type="submit" value="Update" />
</form>
</div>
</body>
</html>


Angular-controller:

angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;

thisApp.showUpd = function(noteID) {
$http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
.then (function(response) {
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);

document.getElementById("updContent").innerHTML = response.data.content;
document.getElementById("updDeadline").value = response.data.deadline;
document.getElementById("updID").value = response.data.id;

if (response.data.completed == 1) {
document.getElementById("updCompleted").checked = true;
} else {
document.getElementById("updCompleted").checked = false;
}
}, function() {
alert("Error getting todo note");
});
}

thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log($scope.noteupd);
}
});


After clicking Test-button I get the following output in my console:


  • TestController.js:7 123123

  • TestController.js:8 2016-01-05 10:28:42

  • TestController.js:9 4

  • TestController.js:10 0



By then, the fields in the form have been filled in (and the hidden field has a value). And after clicking Update I get this in the console:


  • TestController.js:27 TEST

  • TestController.js:28 undefined



If i change the values in the fields manually, I do get something else instead of "undefined", but the idea is that one should not have to change the values. Also, the object does not contain the hidden "id" even if all fields are changed.

Obviously, I'm a beginner at this, and obviously I'm doing it wrong, but do anyone have a suggestion on how I can make this work?

Answer Source

Your html is fine but your code needs fixing

First define noteupd in your code

Use noteupd to change your html values rather then document.getElementById

That should fix your code it will end up looking like this

angular.module('todoApp', []).controller('TestController', function($scope, $http) {
    var thisApp = this;
    $scope.noteupd={}; //defining noteupd
    var noteupd=$scope.noteupd;  //preventing scope issues
    thisApp.showUpd = function(noteID) {
        $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
            .then (function(response) {
                console.log(response.data.content);
                console.log(response.data.deadline);
                console.log(response.data.id);
                console.log(response.data.completed);

                //updating your html
                 noteupd.content= response.data.content;
                noteupd.deadline = response.data.deadline;
              noteupd.id= response.data.id;

                if (response.data.completed == 1) {
                    noteupd.completed = true;
                } else {
                    noteupd.completed = false;
                }
            }, function() {
                alert("Error getting todo note");
            });
    }

    thisApp.updTodo = function(noteupd) {
        console.log("TEST");
        console.log($scope.noteupd);
    }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download