CODEWITHSUNDEEP
angularjs
Ido Barash
Ido Barash

Reputation: 5122

Angular new object binding

I have a page that supposed to create a new user object and post it to the server.

This is the html file:

<div class="container" ng-controller="newUserCtrl">
...
 <tr>
     <td>Username:</td>
     <td><input type="text" name="name" ng-value="user.username"></td>
 </tr>
 <tr>
     <td>Password:</td>
     <td><input type="text" name="name" ng-value="user.password"></td>
 </tr>
 <tr>
     <td>Name:</td>
     <td><input type="text" name="name" ng-value="user.name"></td>
 </tr>
...
</div>

This is the controller:

angular.module('module')
    .controller('newUserCtrl', ['$scope', '$http', '$location',
          '$state', newUserCtrl]);


function newUserCtrl($scope, $http, $location,
                        $state) {

    $scope.user = {
      usrename: null,
      password: null,
      name: null
  };

  $scope.saveNewUser = function() {
    var aa = $scope.user;

    $http.post('SERVICE URL', $scope.user)
      .then(doSomething);
  }

}

The problem that the data is not binded to the $scope.user object. I insert stuff, then after invoking the save methond I can see that aa is the initail user object.

How can I do that?

Regards, Ido

Upvotes: 0

Views: 32

Answers (1)

Kindzoku
Kindzoku

Reputation: 1420

Change ng-value to ng-model to fix this.

Here is a Plunker https://plnkr.co/edit/R1kqBfzNHfkJK0fvKhgJ?p=preview

This solution is with $scope https://plnkr.co/edit/Cic7We?p=preview

This approach is cleaner.

<div class="container" ng-controller="newUserCtrl as nu">
...
 <tr>
     <td>Username:</td>
     <td><input type="text" name="name" ng-model="nu.user.username"></td>
</tr>
<tr>
     <td>Password:</td>
     <td><input type="text" name="name" ng-model="nu.user.password"></td>
</tr>
<tr>
     <td>Name:</td>
     <td><input type="text" name="name" ng-model="nu.user.name"></td>
</tr>
...
</div>

angular.module('module')
    .controller('newUserCtrl', ['$http', '$location',
      '$state', newUserCtrl]);


function newUserCtrl($http, $location, $state) {
    var vm = this;

    vm.user = {
      usrename: null,
      password: null,
      name: null
   };

  vm.saveNewUser = function() {
    var aa = vm.user;

    $http.post('SERVICE URL', vm.user)
      .then(doSomething);
  }

}

Upvotes: 1

Related Questions