angularjs如何将我的表单发布到json中

Question

我正在构建我的第一个 Angular 应用程序并希望将我的表单发布到我的 JSON 数据中。

这是我的表格：

  <span ng-show="show">
  <form name="inputForm" class="form-group" ng-controller="FormController as autoctrl"  ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
  <br>

  <p> Type: <input type="text" name="type" ng-model="type" style="margin-left:52px; padding-left:5px;  width:165px;" minlength="2" maxlength="10" required /></p>

  <p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="bouwjaar"  style="margin-left:22px; padding-left:5px;  width:165px;" minlength="4" maxlength="4" required /></p>

  <p>Km: <input type="number" name="km" ng-model="km" style="margin-left:60px; padding-left:5px;  width:165px;" minlength="2" maxlength="6" required /></p>

  <p>Brandstof:  <input id="select" name="brandstof" ng-model="brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>

  <p>Kenteken: <input type="text" name="kenteken" ng-model="kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>

  <p>Datum:  <input type="text" name="datum" ng-model="datum"  style="margin-left:40px; padding-left:5px;  width:165px;" minlength="3" maxlength="11" required  /></p>

  <p>checked: <input type="checkbox"  name="checked" ng-model="checked" style="margin-left:28px;" required /></p>

   <br>
   <button class="btn btn-primary" type="submit"    value="submit">Toevoegen</button>

   <div>{{inputForm.$valid}}</div>


  </form>
  </span>

这是我的 app.js：

(function(){
var volkswagenApp = angular.module('volkswagenapp',[]);


 volkswagenApp.controller('VolkswagenCtrl', [ '$http' ,       function($http){
         var vw =  this;
         vw.gegevens = [];
         $http.get('autos.json').success(function(data){
         vw.gegevens = data;
         });



        }]);

        volkswagenApp.controller('FormController',function(){
           this.gegevens={};
          /* this.addGegevens = function(gegeven) {
            gegeven.gegevens.push(this.gegeven);
            this.gegevens={};
           }*/

           this.addGegevens = function(gegeven){
            this.gegevens.datum = Date.now();
            vw.gegevens.push(this.gegeven);
            this.gegeven = {};
           }


                });

                })();

谁能告诉我哪里出错了？我做了与他们在 codeschool 上相同的步骤。

Answer 1

由于您使用的是controllerAs，因此您需要将控制器对象添加到ng-model中的所有变量中

例子：

<input  name="type" ng-model="type">

应该是：

<input  name="type" ng-model="autoctrl.type"> 

但是，您可以通过将 ng-model 的所有属性设置为同一父级来简化发布单个对象

<input  name="type" ng-model="autoctrl.myFormModel.type">

然后，当您准备好发布时，您只需发送myFormModel

$http.post(url, this.myFormModel).then(....  

请注意，您应该存储对this 的引用，以便您可以在任何回调中使用该引用。我看到你在使用vm，但它没有在FormController 内的任何地方定义

见John Papa Angular Style guide