When the save button is clicked I am trying to display values from a textbox and button in a grid. I have written the html part and I have tried out something by myself. When the save button is clicked the values are not displayed in the table grid.
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="clear">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="headerCtrl">
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
Result: [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
});
</script>
</body>
</html>
There are few issues,
(i) Have only one ng-app and ng-controller common for both divs
(ii) There is no angular reference with your code
(iii) You need to push the values to the array on Save function,
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
DEMO
var app = angular.module('myApp', []);
app.controller('headerCtrl', function($scope) {
$scope.headerData = {};
$scope.headerData.Result = [];
$scope.clear = function(){
$scope.headerData.Result = [];
}
$scope.Save = function() {
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
};
});<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>