CODEWITHSUNDEEP
angularjs
Dann
Dann

Reputation: 13

AngularJs push form data into json

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

and this is my 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>

and this is the error in the console:

    Error: Can't find variable: vw

I know that the variable W isn't defined in FormController, my question is how can i adjust the form controller so that it works. I tried everything, searched the docs. watched several tutorials and i cant find out where im going wrong. This is for a school project. Please help!

Upvotes: 0

Views: 118

Answers (4)

Venkatesh Konatham
Venkatesh Konatham

Reputation: 828

You want to share VW variable to another controller. In order to do this you can use $rootScope. Please check below code which will work for you. Below is the updated span block

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

And you can find the latest app code below 

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


    }]);

Upvotes: 0

Ibrahim
Ibrahim

Reputation: 594

Ideal way will be using a `factory' to store the results, and use that factory share data between two controller. 

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

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

In the FormController add vm = this at beginning.

autoctrl.addGegevens(inputForm) and

in the addGegevens function 

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

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

           }

Upvotes: 1

Zakaria
Zakaria

Reputation: 15070

It's normal. In your second controller (FormController), there is no vw var declared. You can add it as you did in the first controller :

var vw = this

Upvotes: 0

Related Questions