想要使用Angular將表單中的數據作為JSON數組中的新對象提交

Question

我正在尋找一個帶有提交按鈕的簡單輸入框，以將信息添加到JSON文件中。 我正在使用Angular檢索該數據，創建一個新的JSON對象，並將帶有新數據的該對象發布到名為pets.json的文件中。

的HTML

<form ng-submit="submit()" ng-controller="PetPosting">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>

角JS

  var app = angular.module('app', ['ui.bootstrap', 'bootstrapLightbox']);

 //load images from pets.json and display them in HTML
 app.controller('GalleryCtrl', function ($scope, Lightbox, $http) {
     $http.get('pets.json')
     .then(function(res){
      $scope.images = res.data;
   });
 });
 /*Add new data to JSON file*/
 app.controller('PetPosting',function($scope, $http) {

      $scope.submit = function() {
        if ($scope.text) {
          $http({
                    method: "post",
                    url: "pets.json",
                    data: {
                      "thumbUrl": $scope.text,
                    }
                });
        }

      }



});

我不完全了解這是如何工作的。 對於如何弄清楚如何完成此簡單任務的任何見解或指導，將不勝感激:)

Answer 1

那不是“ $ http”的正確實現，“ url”屬性是一個接收數據的服務器端點，因為您需要一些服務器端代碼才能附加到.json文件。

如果您想將信息保存到用戶本地，則LocalStorage API可能就足夠了，並且很容易實現