2016-12-01 21 views
1

フォームを使用して、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" 
    } 
] 
+0

変更を永続化するには、サーバー側のロジックが必要になります。 –

+0

あなたのサーバーでPHPを使用してください。 –

答えて

2

JSONファイルあなたは$http.get('youtube.json')に電話をかけてアクセスすることができます。したがって、サーバーはアクセスするためのURLを提供します。実際にそれに書き込むためには依然としてリクエストを処理し、ファイルに書き込む必要があります(nodejに 'fs'モジュールがある場合)。それ以外では、Webからファイルシステムにアクセスすることはできません。

+0

あなたの答えはありがたいです、私はPHPを使用します –

+0

答えがあなたに役立つならば、受け入れられたものとしてマークすることができます:) –

関連する問題