Имея трудное время, делая запрос на отправку в файл JSON с использованием углового

Question

там! В целом, для Angular и Javascript в целом, я пытаюсь создать одностраничное приложение для игрушек, где вы можете добавлять и просматривать клиентов, используя JSON-файл в качестве хранилища. Мне удалось отобразить мой JSON, но я застрял в добавлении новых записей, используя форму. Я проверяю на сервере, и когда я нажимаю кнопку «Отправить», не создается почтовый запрос. Любая помощь приветствуется! благодаря!

это моя форма

<div ng-controller="CustomerAddController as addCtrl"> 
    <form 
    ng-submit="addCtrl.addCustomer()" novalidate> 
    <h2>Add a new customer </h2> 
    <fieldset ng-model="addCtrl.customer.name">Name: <input type="text"/></fieldset> 

    <fieldset ng-model="addCtrl.customer.email">Email: <input type="email"/></fieldset> 
    <fieldset ng-model="addCtrl.customer.phone">phone: <input type="text"/></fieldset> 
    <h3>Address</h3> 
    <fieldset ng-model="addCtrl.customer.street">Street: <input type="text"/></fieldset> 
    <fieldset ng-model="addCtrl.customer.city">City: <input type="text"/></fieldset> 
    <fieldset ng-model="addCtrl.customer.state">State: <input type="text"/></fieldset> 
    <fieldset ng-model="addCtrl.customer.zip">Zip: <input type="text"/></fieldset> 
    <input type="submit" value="Submit"/> 
    </form> 
</div> 

и это мой app.js файл

'use strict'; 
var app = angular.module('app', [ ]); 
app.controller('CustomerListController', function($scope, $http){ 
    $http.get('customers.json').then(function(res){ 
     $scope.customers = res.data; 
    }); 
}); 

app.controller('CustomerAddController', function($scope, $http){ 
    $scope.addCustomer = function() { 
    $http.post('customers.json').then(function(res){ 
     $scope.customers = res.data; 
    }) 
    .success(function(data){ 
      console.log(data); 
      if (!data.success) { 
      $scope.errorName = data.errors.name; 
      } else { 
      $scope.message = data.message; 
      } 
     }); 

    }; 
}); 

Answer 1

Очень 1-ый, что вы должны есть, чтобы

ng-model Присоединить директиву input поля не в fieldset, поскольку они имеют тенденцию работать только с input & textarea

<form ng-submit="addCtrl.addCustomer()" novalidate> 
    <h2>Add a new customer </h2> 
    <fieldset> 
     Name: <input type="text" ng-model="addCtrl.customer.name" /> 
    </fieldset> 
    <fieldset> 
     Email: <input type="email" ng-model="addCtrl.customer.email" /> 
    </fieldset> 
    <fieldset> 
     phone: <input type="text" ng-model="addCtrl.customer.phone" /> 
    </fieldset> 
    <h3>Address</h3> 
    <fieldset> 
     Street: <input ng-model="addCtrl.customer.street" type="text" /> 
    </fieldset> 
    <fieldset> 
     City: <input ng-model="addCtrl.customer.city" type="text" /> 
    </fieldset> 
    <fieldset> 
     State: <input ng-model="addCtrl.customer.state" type="text" /> 
    </fieldset> 
    <fieldset> 
     Zip: <input ng-model="addCtrl.customer.zip" type="text" /> 
    </fieldset> 
    <input type="submit" value="Submit" /> 
</form> 

Кроме этого, как вы используете controllerAs так контроллер данных должен ограничен в this контексте. Также почтовые вызовы, похоже, имеют .json в URL-адресе, который должен быть фактическим сервером URL, поэтому этот параметр будет передан с полезной нагрузкой &, не забудьте передать данные в post запрос, как @Kyle указал ниже.

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

app.controller('CustomerListController', function($http){ 
    var self = this; 
    $http.get('customers.json').then(function(res){ 
    self.customers = res.data; 
    }); 
}); 

app.controller('CustomerAddController', function($http){ 
    var self = this; 
    self.addCustomer = function() { 
    //below serverUrl would be server where you configured post request 
    //pass self.customer in that, will pass whole customer filled form 
    $http.post(serverUrl, self.customer).then(function(res){ 
     self.customers = res.data; 
    }) 
    .success(function(data){ 
      console.log(data); 
      if (!data.success) { 
      self.errorName = data.errors.name; 
      } else { 
      self.message = data.message; 
      } 
     }); 
    }; 
}); 

Answer 2

Вам необходимо отправить данные с $ http.post()

$http.post("customers.json",data).then... 

https://docs.angularjs.org/api/ng/service/$http