Угловое связывание нового объекта

Question

У меня есть страница, которая должна создать новый пользовательский объект и отправить его на сервер.

Это HTML-файл:

<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> 

Это контроллер:

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

} 

Проблема, что данные не переплетены на объект $ scope.user. Я вставляю материал, а после вызова метода сохранения я вижу, что aa - объект пользователя initail.

Как я могу это сделать?

С уважением, идо

Answer 1

Изменить ng-value для ng-model, чтобы исправить это.

Вот Plunker https://plnkr.co/edit/R1kqBfzNHfkJK0fvKhgJ?p=preview

Это решение с $ объем https://plnkr.co/edit/Cic7We?p=preview

Этот подход чище.

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

}