javascript - Filling data in form using angular -
i true beginner @ angular (but not js), started yesterday, hope forgive me if question sound stupid. consider 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 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 following output in console:
- testcontroller.js:7 123123
- testcontroller.js:8 2016-01-05 10:28:42
- testcontroller.js:9 4
- testcontroller.js:10 0
by then, fields in form have been filled in (and hidden field has value). , after clicking update in console:
- testcontroller.js:27 test
- testcontroller.js:28 undefined
if change values in fields manually, else instead of "undefined", idea 1 should not have change values. also, object not contain hidden "id" if fields changed.
obviously, i'm beginner @ this, , i'm doing wrong, have suggestion on how can make work?
your html fine code needs fixing
first define noteupd in code
use noteupd change html values rather document.getelementbyid
that should fix code end looking
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 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); } });
Comments
Post a Comment