フォームを使用して、JSONファイルにデータを追加します。どうやってやるの ? JSONファイルを再作成する必要はありますか、既存のJSONファイルにデータを追加できますか?JSONファイルにデータを追加
$ http.postがうまくいかないので、それを悪用するか、それとも置き換える必要がありますか?
HTMLファイル
<body ng-app='app'>
<div ng-init="getData()" ng-controller="listController">
<ul ng-repeat="detail in details">
<li>
<a href="{{detail.url}}">{{detail.url}}</a>
</li>
<li>
{{detail.description}}
</li>
<li>
{{detail.author}}
</li>
</ul>
<form method=POST ng-submit="submit()">
<label for="lien">Lien :
<input type="url" id="lien" ng-model="detail.url" placeholder="http://"/>
</label>
{{detail.url}}
<br><br>
<label for="description">Description :
<textarea id="description" ng-model="detail.description"></textarea>
</label>
{{detail.description}}
<br><br>
<label for="auteur">Auteur :
<input type="text" id="auteur" ng-model="detail.author"></input>
</label>
{{detail.author}}
<p>{{detail}}</p>
<input type="submit" id="submit" value="Submit" />
<p>{{details}}</p>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</body>
JSファイル
var app = angular.module("app", []);
app.controller("listController", ["$scope","$http",
function($scope,$http) {
$scope.getData = function()
{
$http.get('youtube.json').then(function (response){
$scope.details = response.data;
});
};
$scope.submit = function()
{
$scope.details.push($scope.detail);
$http.post('youtube.json', $scope.details);
}
}]);
ファイルを静的に提供しています
[
{
"url": "https://www.youtube.com/watch?v=E1NIJjTYq6U",
"author": "Grafikart.fr",
"description": "Salut tout le monde"
},
{
"url": "https://www.youtube.com/watch?v=fOuKMuaGJ54&list=PLjwdMgw5TTLUDlJyx4yIPQjoI-w-7Zs1r",
"author": "Grafikart.fr",
"description": "Les directives"
}
]
変更を永続化するには、サーバー側のロジックが必要になります。 –
あなたのサーバーでPHPを使用してください。 –