Ido Barash Ido Barash - 3 months ago 19
AngularJS Question

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

Answer

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

}
Comments