Introduction:
This article explain you how to add dynamic rows with textbox to a table using AngularJS
Description:
Below code is used to add dynamic rows with textbox to a table using AngularJS
To implement this we need to write the code like as shown below
Java Script :
var myApp = angular.module("myApp", []);
myApp.controller("myController", function ($scope) {
$scope.empdetails = [{
empno: '',
name: '',
age: '',
salary: '',
deptno: ''
}];
$scope.addrow = function () {
$scope.empdetails.push({
empno: '',
name: '',
age: '',
salary: '',
deptno: ''
});
};
$scope.delete = function (val) {
$scope.empdetails.splice(val, 1);
};
});HTML and CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add Dynamic Rows to table using AngulatJS</title>
<style>
table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
padding: 5px;
}
table td {
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myController" style="width: 82%; margin: auto; border: solid 1px #000;">
<div style="text-align: center;"><b>Adding Dynamic Rows to Table using AngulatJS</b></div>
<table border="1">
<tr>
<th>Emp No</th>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
<th>Dept No</th>
<th>delete</th>
</tr>
<tr ng-repeat="items in empdetails">
<td>
<input id="TxtEmpNo" name="empno" type="text" model="items.empno" />
</td>
<td>
<input id="TxtName" name="name" type="text" model="items.name" />
</td>
<td>
<input id="TxtAge" name="age" type="text" model="items.age" />
</td>
<td>
<input id="TxtSalary" name="salary" type="text" model="items.salary" />
</td>
<td>
<input id="TxtDeptNo" name="deptno" type="text" model="items.deptno" />
</td>
<td><a href="javascript:;" ng-click="delete($index)">delete</a></td>
</tr>
</table>
<div><a href="javascript:;" ng-click="addrow()">add</a></div>
<div style="text-align: center;"><b>www.logicspark.in</b></div>
</div>
</body>
</html>
DEMO
No comments:
Post a Comment