CODEWITHSUNDEEP
javascripthtmlangularjs
user3440121
user3440121

Reputation: 33

Passing Values in Angular JS

I'm a newbie to Angular JS. I've created a form in my index.html page, when I fill the details in the form and press submit, it should redirect to details.html page. Where I can able to show the details filled on the form.

HTML

  <html>
  <script src="angular.min.js"> </script>
  <script src="script.js"> </script>
  </head>
  <body ng-app="FormApp">
  <div class="forms" ng-controller="CustomerDetailsController">
    <form novalidate>
      First Name:<br>
      <input type="text" ng-model="firstName" required/>
      <br>
      <br>
      Last Name:<br>
      <input type="text" ng-model="lastName">
      <br>
      <br>
      Age:<br>
      <input type="text" ng-model="lastName">
      <br>
      <br>
      Email :<br>
      <input type="email" ng-model="lastName">
      <br>
      <br>
      Location<br>
      <input type="text" ng-model="lastName">
      <br>
      <br>
      <button ng-click="submit()">SUBMIT</button>
    </form>
  </div>
  </body>
  </html>

CONTROLLER

var FormApp = angular.module('FormApp', []);
FormApp.controller('CustomerDetailsController', ['$scope',function($scope) {
    $scope.submit = function() {

    }
}]);

What will be the best way to do this? Any help would appreciated, Thanks.

Upvotes: 2

Views: 283

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

You can achieve this by adding angular routing to your application which need ngRoute dependency. Then you need to define one parent controller that can hold the partial views common data like here it is mainCtrl.

Apart from that you missed few things while you created a form, form should have its name attribute so that angular will create a scope variable of that form and internally manages form validity inside that scope variable like $valid, $error, etc. Then the same name should be given to each form element, if you don't declare the name attribute, then it won't consider it as form element.

HTML

<html ng-app="app">
  <head>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
    <script src="example.js"></script>
  </head>
  <body>

<div ng-controller="mainCtrl">
  <div class="forms">
    <ng-view></ng-view>
  </div>
</div>
  </body>
</html>

CODE

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when('/view1', {
      templateUrl: 'view1.html',
      controller: 'CustomerDetailsController'
    })
    .when('/view2', {
      templateUrl: 'view2.html',
      controller: 'form2Ctrl'
    })
    .otherwise({
      redirectTo: '/view1'
    });
});
app.controller('mainCtrl', function($scope) {
  $scope.form = {};
});

app.controller('CustomerDetailsController', function($scope,$location) {
  $scope.submit = function(){
    if($scope.form1.$valid)
      $location.path('/view2');
  };
});

app.controller('form2Ctrl', function($scope,$location) {
  //this controller contain the data which will you get from
});

Working Plunkr

Update

Clearing confusion of on what form2Ctrl will contain as per request by @user3440121.

The second view may contain a ajax call that will fetch the user information from server and display it on the view or it can be any show the list of employees, Its depend on the whats the requirement of your application. Basically you should not store data on client side as i did stored the data in form object and accessing it on view2 directly as I can access parent scope variable. I shown this only for demonstration purpose. In actual implementation we will take $route parameter from the URL & the we will make an ajax call to server which give data back to you. Currently in plunkr we redirecting to view2 using $location.path('/view2'); that would change to $location.path('/edit/1') and you need to add route to your app.config like

Route

.when('/edit/:id', {
   templateUrl: 'view2.html',
   controller: 'form2Ctrl'
})

Controller

app.controller('form2Ctrl', function($scope,$route) {
   //we can get id here from $route object
   console.log($route.params.id); //here it will be `id` which `1` in the URL
   //now you have id you can make ajax to server and get required data
});

Hope above information cleared all the doubts about the question. Thanks.

Upvotes: 1

Ian CT
Ian CT

Reputation: 1411

Your $scope.submit function has nothing inside it for routing.

It should be:

$scope.submit = function($scope) { 
  $scope.$apply(function() { 
    $location.path("*place your details page here*"); 
  });
}

Note that you also need to inject $location to your controller, as follows:

FormApp.controller('CustomerDetailsController', 
  ['$scope', '$location', function($scope, $location) ...

Try reading the following for more details: https://docs.angularjs.org/api/ng/service/$location

Also have you tried checking your paths? (e.g. angular.min.js, script.js)

Upvotes: 0

Related Questions