It is not showing the data in another page after form data submitted.
Please help me. what is the mistake in my code? Give solution
it is my parent page
*index.html page*
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav" >
<li class="active"><a href="#/registration">Registration</a></li>
<li><a href="#/reports">Reports</a></li>
</ul>
</div>
</nav>
<div ng-view>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header" >
<a class="navbar-brand" href="#">[email protected]</a>
</div>
</div>
</nav>
This is
*app.js*
var app = angular.module("myApp", ['ngRoute']);
var list = [];
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/registration', {
templateUrl: 'pages/registration.html',
controller: 'registrationCtrl'
}).
when('/reports', {
templateUrl: 'pages/reports.html',
controller: 'registerCtrl'
}).
otherwise({
redirectTo: '/registration'
});
}]);
This is
*controller.js*
app.controller("registerCtrl", function($scope){
$scope.names =
[{Firstname:"Hemanth",Lastname:"Kumar",Email:"[email protected]"},{Firstname:"Sandeep",Lastname:"kumar",Email:"[email protected]"}];
});
app.controller("registrationCtrl", function($scope){
$scope.list = {};
$scope.saveuser = function(){
$scope.names.push($scope.list);
$scope.list = {};
}
});
This is child page
*registeration.html*
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";>
<body style="background-color:#e0cdba">
<div ng-controller="registrationCtrl">
<div class="container" style="padding: 5%">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Username:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter Username"
ng-model="nitinlist.Firstname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Lastname:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter lastname"
ng-model="nitinlist.Lastname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email"
placeholder="Enter email" ng-model="nitinlist.Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-info"
ng-click="saveuser()">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
This is another chaild page
reports.html
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js";></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";>
<body style="background-color:#e0cdba">
<div ng-controller="registrationCtrl">
<div class="container" style="padding: 5%">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in names">
<td>{{n.Firstname}}</td>
<td>{{n.Lastname}}</td>
<td>{{n.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js";></script>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
