Filling data in form using angular

Question

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?

You don't want to use document.getElementById in angular use angular.element("#id") instead — Binvention
– Binvention, Commented Jan 5, 2016 at 23:21
Also realize angular is 2 way data binding. Meaning if you change the value of your ng-model variable in your code it will change in your html — Binvention
– Binvention, Commented Jan 5, 2016 at 23:29
@Binvention Tried ti change to angular.element("#id") but it didn't work at all, now it doesn't load the data into the fields. Also tried to wrap it as a jQuery object: angular.element($("#id")), it did not work either. And also, where should I have defined noteupd? — BluePrint
– BluePrint, Commented Jan 5, 2016 at 23:39
Just for future reference the problem with trying to change the values the way you tried is that ng-model doesn't know you changed the values so it over writes it with the blank object that occurs from noteupd not being defined — Binvention
– Binvention, Commented Jan 5, 2016 at 23:47

Binvention · Accepted Answer · 2016-01-05 23:40:10Z

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

Saltuk · Accepted Answer · 2016-01-06 00:30:58Z

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>

You can very well still use the $scope when you've used controller as. They dont conflict. All controller as does is add a object to the scope that is attached to the this object in your controller
nope you didnt understand .. if you define function with this.Method = function you have to use alias .. to access it .. i was trying to tell that ..
And variables attached to $scope are available within the controller without using any sort of parent object. Controller as defines a new object on the scope the scope is where all of the variables available in the controller are. $scope attaches variables to the scope itself. This attaches variables to the alias
The way he had it originally was fine as far as his scopes go
All of the functions he attached to this he properly used the alias

Collectives™ on Stack Overflow

Filling data in form using angular

2 Answers 2

1 Comment

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Related