Hello, I am a newcomer to Angularjs and I am facing an issue with creating a dynamic table. Unfortunately, the table is not being generated and upon further investigation, I noticed that the form submit functionality is also not working as expected. Please take a look at my code and provide me with some guidance.
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfaead8fa8a2aea6a3e1aca0a2">[email protected]</a>',
'dept' : 'cse'
}];
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push( {
'name' : $scope.name,
'email' : $scope.email,
'dept' : $scope.dept
});
$scope.name = '';
$scope.email = '';
$scope.dept = '';
};
});
</script>
Below is the corresponding HTML code.
<body>
<div ng-app = "myApp" controller="myCtrl">
<div class = "form-group" >
<form class = "student-form" ng-submit="addStudent()">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = "table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</div>
</body>