Question

我正在构建我的第一个角度应用程序，并希望将我的表单发布到我的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 = {};
           }


                });

                })();

有人可以告诉我哪里出错了吗？我做了与在codechool上做同样的步骤。

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

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

1 个答案: