CODEWITHSUNDEEP
javascriptjqueryangularjsforms
BluePrint
BluePrint

Reputation: 2134

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:

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:

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?

Upvotes: 1

Views: 4687

Answers (2)

Saltuk
Saltuk

Reputation: 1159

If you are using this variable against $scope .. you have always ng-controller with alias , and you can only access properties or methods of controller with controller alias only ..

if you didnt use ng-controller= "TestController as myController" and not access methods as myController.method() .. your example won't be worked...(section 2)

Here is some examples to describe you how it is work

Check this tutorial too .. http://plnkr.co/edit/FgBcahr6WKAI2oEgg4cO?p=preview 

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

  thisApp.showUpd = function(noteID) {
    // changed your url as defat json data 
    $http({
        method: 'GET',
        url: 'data.json'
      })
      .then(function(response) {
        console.log(response.data);
        console.log(response.data.content);
        console.log(response.data.deadline);
        console.log(response.data.id);
        console.log(response.data.completed);

        thisApp.noteupd = response.data;
        $scope.readedTodo = response.data;




      }, function() {
        alert("Error getting todo note");
      });
  }

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

<!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="script.js"></script>
</head>

<body>
  <div id="overlaybox" ng-controller="TestController as myControl">
    <button ng-click="myControl.showUpd(4)">Test</button>
    <br/>
    <br/>
    <br/>


    <form ng-submit="myControl.updTodo()">
      <h3>if you use binding h this against $scope</h3> Note:
      <br/>
      <textarea rows="5" cols="30" id="updContent" ng-model="myController.noteupd.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline" ng-model="myController.noteupd.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="myController.noteupd.completed" />
      <br/>


      <h3>if you use binding with $scope</h3> Note:

      <br/>
      <textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
      <br/>
      <input type="hidden" id="updID" ng-model="readedTodo.id" />
      <br/>
      <input type="submit" value="Update" />
    </form>
  </div>


  <h3>SEction 2 </h3>
    <div id="overlaybox2" ng-controller="TestController ">
    <button ng-click="showUpd(4)">Test</button>
    <button ng-click="showUpdate(4)">Test</button>
    <br/>
    <br/>
    <br/>


    <form ng-submit="updTodo()">
      <h3>if you use binding h this against $scope</h3> Note:
      <br/>
      <textarea rows="5" cols="30" id="updContent" ng-model="readedTodo.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline" ng-model="readedTodo.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
      <br/>


      <h3>if you use binding with $scope</h3> Note:

      <br/>
      <textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
      <br/>
      <input type="hidden" id="updID" ng-model="readedTodo.id" />
      <br/>
      <input type="submit" value="Update" />
    </form>
  </div>

</body>

</html>

Upvotes: 0

Binvention
Binvention

Reputation: 1077

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);
    }
});

Upvotes: 1

Related Questions