Question

这是我的app.js

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 = {};
           }
          });

这是我的index.html：

   <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="autoctrl.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="autoctrl.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="autoctrl.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="autoctrl.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>

    <p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.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="autoctrl.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="autoctrl.checked" style="margin-left:28px;" required /></p>
    <br>
    <button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>

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

这是控制台中的错误：

    Error: Can't find variable: vw

我知道变量W没有在FormController中定义，我的问题是我如何调整表单控制器以使其工作。我尝试了一切，搜索了文档。看了几个教程，我不知道我哪里出错了。这是一个学校项目。请帮忙！

Answer 1

在FormController添加vm = this开头。

autoctrl.addGegevens（inputForm）和

在addGegevens函数

中

this.addGegevens = function(inputForm){
            this.gegevens.datum = Date.now();

            for (var formField in inputForm){
              if(inputForm.hasOwnProperty(formField)){
                  vw.gegevens.push({formField :inputForm[formField] });
              }
            }

           }

Answer 2

这很正常。在第二个控制器（FormController）中，没有声明vw var。您可以像在第一个控制器中那样添加它：

var vw = this

Answer 3

您想要将VW变量共享给另一个控制器。为此，您可以使用$ rootScope。请查看下面适合您的代码。以下是更新的跨度块

<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="autoctrl.type" ng-model="autoctrl.gegevens.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="autoctrl.gegevens.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="autoctrl.gegevens.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="autoctrl.gegevens.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>

                    <p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.gegevens.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="autoctrl.gegevens.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="autoctrl.gegevens.checked" style="margin-left:28px;" required /></p>
                    <br>
                    <button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>

                    <div>{{inputForm.$valid}}</div>
                    {{ PostDataResponse}} 
                    {{autoctrl.gegevens.type}}
                    {{autoctrl.gegevens.bouwjaar}}

                </form>
            </span>

您可以在下面找到最新的应用代码

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


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


    }]);

volkswagenApp.controller('FormController', ['$rootScope', function ($rootScope) {
        this.gegevens = {};
        //var vw = this;
       // vw.gegevens = [];
        /* this.addGegevens = function(gegeven) {
         gegeven.gegevens.push(this.gegeven);
         this.gegevens={};
         }*/
        this.addGegevens = function (gegeven) {
            debugger;
            this.gegevens.datum = Date.now();
            $rootScope.VolksWagenAppScope.gegevens.push(this.gegevens);
            this.gegevens = {};
        }


    }]);

Answer 4

理想的方式是使用'工厂'＃39;存储结果，并在两个控制器之间使用该工厂共享数据。

volkswagenApp
        .factory('gegavensFactory', function() { 
            var _gegevens = [];
            return {
                init: function(gagaves) {
                    _gegavens = gegavens;
                },
                add: function(gegaven) {
                    _gegavens.push(gegaven);
                }
            }

        )}

volkswagenApp
        .controller('VolkswagenCtrl',
             ['$http', 'gegavensFactory' , function($http, gegavensFactory){
                 $http.get('autos.json').success(function(data){
                    gegavensFactory.init(data);
                 });
            }]);

volkswagenApp
       .controller('FormController',['gegavensFactory', function(gegavensFactory){
        this.gegevens={};

        this.addGegevens = function(gegeven){
            this.gegevens.datum = Date.now();
            gegavensFactory.add(this.gegeven);
            this.gegeven = {};
        }
    }]);

AngularJs将表单数据推送到json中

4 个答案: