angularjs我怎樣才能發表我的表單到JSON

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"> 

然後，當你準備好後，你只需發送你應該存儲this參考，所以你可以使用任何回調內部的參考myFormModel

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

注意。我看你使用vm但沒有在任何地方定義裏面FormController

見John Papa Angular Style guide