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

你应该做的第一件事是，

将ng-model指令附加到input字段而不是fieldset，因为它们只适用于input＆amp; 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上下文。此外，发布呼叫似乎在URL中有.json，这应该是实际的服务器URL，因此这些参数将通过有效负载＆amp;不要忘记在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

很难使用angular对JSON文件发出post请求

2 个答案: