Почему не работает код в angular?

Question

[Kaunov_ivan]

Проблема:
Новая строка при создании пользователя появляется, но пустая.

HTML:

<table class="table table-hover table-condensed" ng-controller="adminController as usersAdmin">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Telephone</th>
					<th>Address</th>
					<th>Street</th>
					<th>City</th>
					<th>State</th>
					<th>Zip</th>
					<th>edit</th>
					<th>delete</th>
				</tr>
			</thead>
			<tbody>
				<form id="creating" role="form" name="newUserForm" ng-controller="formController as form" ng-submit="form.addNewUser()">
				<tr class="newUser">
					<td><input type="text" class="form-control" id="nameNew" placeholder="Name" ng-model="form.newUser.name"></td>
					<td><input type="email" class="form-control" id="mailNew" placeholder="Email" ng-model="form.newUser.email"></td>
					<td><input type="text" class="form-control" id="telephoneNew" placeholder="Telephone" ng-model="form.newUser.telephone"></td>
					<td><input type="text" class="form-control" id="adressNew" placeholder="Address" ng-model="form.newUser.address"></td>
					<td><input type="text" class="form-control" id="streetNew" placeholder="Street" ng-model="form.newUser.street"></td>
					<td><input type="text" class="form-control" id="cityNew" placeholder="City" ng-model="form.newUser.city"></td>
					<td><input type="text" class="form-control" id="stateNew" placeholder="State" ng-model="form.newUser.state"></td>
					<td><input type="text" class="form-control" id="zipNew" placeholder="Zip" ng-model="form.newUser.zip"></td>
					<td><button type="submit" class="btn btn-success saveNew"> save </button></td>
					<td><button type="reset" class="btn btn-danger"> X </button></td>
				</tr>
				</form>
				<tr ng-repeat="user in usersAdmin.users">
					<td class="data" type="text" id="name">{{user.name}}</td>
					<td class="data" type="email" id="mail">{{user.email}}</td>
					<td class="data" type="text" id="telephone">{{user.telephone}}</td>
					<td class="data" type="text" id="adress">{{user.address}}</td>
					<td class="data" type="text" id="street">{{user.street}}</td>
					<td class="data" type="text" id="city">{{user.city}}</td>
					<td class="data" type="text" id="state">{{user.state}}</td>
					<td class="data" type="text" id="zip">{{user.zip}}</td>
					<td><button type="submit" class="btn btn-default" id="editOne"> edit </button></td>
					<td><button type="reset" class="btn btn-danger" id="removeOne"> X </button></td>
				</tr>
			</tbody>
		</table>

JS:

var dataJSON = {"users" : [
					{
						"name"      : "Ivan",
						"email"     : "[e-mail]",
						"telephone" : "[phone]",
						"address"   : "Kiev, Ukraine",
						"street"    : "Tumanyana",
						"city"      : "Kyiv",
						"state"     : "kievska",
						"zip"       : "02002"
					},
					{
						"name"      : "Ivan",
						"email"     : "[e-mail]",
						"telephone" : "[phone]",
						"address"   : "Kiev, Ukraine",
						"street"    : "Tumanyana",
						"city"      : "Kyiv",
						"state"     : "kievska",
						"zip"       : "02002"
					},
					{
						"name"      : "Ivan",
						"email"     : "[e-mail]",
						"telephone" : "[phone]",
						"address"   : "Kiev, Ukraine",
						"street"    : "Tumanyana",
						"city"      : "Kyiv",
						"state"     : "kievska",
						"zip"       : "02002"
					},
					{
						"name"      : "Ivan",
						"email"     : "[e-mail]",
						"telephone" : "[phone]",
						"address"   : "Kiev, Ukraine",
						"street"    : "Tumanyana",
						"city"      : "Kyiv",
						"state"     : "kievska",
						"zip"       : "02002"
					},
					{
						"name"      : "Ivan",
						"email"     : "[e-mail]",
						"telephone" : "[phone]",
						"address"   : "Kiev, Ukraine",
						"street"    : "Tumanyana",
						"city"      : "Kyiv",
						"state"     : "kievska",
						"zip"       : "02002"

					},
						]
				};

(function(){
	var app = angular.module('usersAdmin', []);

	app.controller('adminController', function(){
		this.users = dataJSON.users;
	});

	app.controller('formController',function(){
		this.newUser = {};
		this.addNewUser = function(){
			console.log(this.newUser);
			dataJSON.users.push(this.newUser);
			this.newUser = {};
		};
	});
})()

Comments

[anorudes]

вынеси данные для начала в сервис.

[copal]

anorudes: зачем?

[anorudes]

copal: вы к этому придете в будущем )

[copal]

anorudes: Вы меня пугаете. Данные могут находится некоторое время в сервисе, так как сервис их должен получить. Так же сервис может обрабатывать данные.
Но данные, которые у автора не должны быть в сервисе. Возможно Вы имели ввиду что-то другое и возможно считаете себя таким п*ц умным, что Вам лень даже смертным объяснять. Но в такой постановке Ваш ответ несет больше вреда чем пользы. По этому я и переспросил Вас, а теперь после того как объяснил автору как оно должно быть, просто добавлю, чтобы он забыл Вашу... вот то что Вы наверное считали за гениальный ответ.

[anorudes]

copal: вы что такой буйный, товарищ? Все данные в ангуляр аппе должны быть в сервисе или фабрике, а не рандомным куском сверху. А теперь успокойтесь

Answer 1

[Артур Мудрик]

Потому, что вы обнулили объект:
this.newUser = {};
Объекты в JS копируются по ссылке — если вы в одном месте что-то поменяли, то и в других местах объект изменится. Перед тем как вставлять объект в массив users нужно его клонировать.

(P.S. В table не должно быть нетабличных элементов — неправильно делать form внутри tbody. )

Comments

[Kaunov_ivan]

А можно попросить пример кода?

[Kaunov_ivan]

попробовал убрать - не выходит. Мне ведь сначала нужно этот объект объявить.

Answer 2

[Pavel Ivanov]

В самом начале контроллера сохраняйте ссылку на this:

var vm = this;

Затем в обработчиках используйте эту переменную:

app.controller('formController',function(){
    var vm = this;
    vm.newUser = {};
    vm.addNewUser = function(){
      console.log(vm.newUser);
      dataJSON.users.push(vm.newUser);
      vm.newUser = {};
    };
  });

Comments

[Kaunov_ivan]

не помогло