I have
created a simple demo to show how to add and delete a table row dynamically in
AngularJS 1.
Please don't
mind my HTML view, as this demo is totally focuses on functionality.
HTML
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
initial-scale="1.0" content="width=device-width"
user-scalable="yes"/>
<title>Simple Table Manipulation with
AngularJS</title>
<link rel="stylesheet"
href="css/main.css"/>
<script
src="libs/angular.min.js"></script>
<script
src="controller/app.js"></script>
</head>
<body
ng-app="tableManipulation" ng-controller="TableManipulationCtrl">
<div>
<form name="userForm">
<span>Create
Table</span>
<div
class="form-style">
<label>First Name
</label><input type="text" placeholder="First
Name" ng-model="f_name" required/>
</div>
<div
class="form-style">
<label>Last Name
</label><input type="text" placeholder="Last Name"
ng-model="l_name" required/>
</div>
<div
class="form-style">
<label>Age
</label><input class="inp-style" type="number"
placeholder="Age" ng-model="age" required/>
</div>
<div>
<button
type="button" ng-click="userForm.$valid &&
onAddRow()">Add Row</button>
<button
type="button" ng-click="onDeleteRow()">Delete
Row</button>
</div>
</form>
</div>
<table
class="user-table">
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Age
</th>
</tr>
<tbody>
<tr ng-repeat="rows in
user_rows">
<td>{{rows.f_name}}</td>
<td>{{rows.l_name}}</td>
<td>{{rows.age}}</td>
</tr>
</tbody>
</table>
</body>
</html>
AngularJS + Javascript
angular.module("tableManipulation",
[]).controller('TableManipulationCtrl', ['$scope', function($scope){
$scope.user_rows =
[];
$scope.onAddRow =
function(){
$scope.user_rows.push({
f_name:
$scope.f_name,
l_name:
$scope.l_name,
age:
$scope.age
});
$scope.clearFields();
}
$scope.onDeleteRow
= function(){
$scope.user_rows.pop();
$scope.clearFields(); //scope level function calling
}
$scope.clearFields
= function(){
$scope.f_name
='';
$scope.l_name
='';
$scope.age
='';
}
}]);
CSS
table, th, tr {
border: 1px solid
black;
border-collapse:
collapse;
}
div {
border-radius:
5px;
background-color:
#f2f2f2;
padding: 10px;
width: 50%
}
.inp-style{
margin-left: 42px;
}
Result
No comments:
Post a Comment