@missbells

Как реализовать добавление данных в json посредством AngularJS?

У меня есть приложение AngularJS - таблица с данными, полученными из файла json. Как реализовать добавление новых данных в эту таблицу?

Например, мне надо добавить нового третьего человека в таблицу.
(Понятно, что в HTML будут input, но что нужно писать в контроллере не могу понять.)

4116c004101c4452b53924019e7960cd.jpg

Как получать данные из файла и пользоваться ими понимаю. А как добавлять не понимаю... Помогите, пожалуйста.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Test Application</title>

	<meta charset="UTF-8">

	<link rel="stylesheet" href="style.css">
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

	<div ng-app="TestApp" ng-controller="TestCtrl">

		<table class="user-table">
			<thead>
				<tr><th>Id</th><th>Name</th><th>Username</th><th>Email</th><th>Address</th><th>Phone</th><th>Website</th><th>Company</th></tr>
				<tbody>
					<tr ng-repeat="user in users"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.username}}</td><td>{{user.email}}</td><td>{{user.address.street}}</td><td>{{user.phone}}</td><td>{{user.website}}</td><td>{{user.company.name}}</td></tr>
				</tbody>
			</thead>
		</table>
	</div>

	<script src="app.js"></script>

</body>
</html>


app.js

var app = angular.module('TestApp', []);
app.controller ('TestCtrl', function($scope, $http) {

	$http.get('users.json').then(function(response) {
		$scope.users = response.data;

	});

});


users.json

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }  
]
  • Вопрос задан
  • 784 просмотра
Решения вопроса 1
@Stopy
$scope.users.push(
  {
    "id": 3,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
       }
    }
  }
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы