The
ng-repeat directive is used to draw tables in AngularJS.
Example 1:
Click on the link to learn how to create table->Html Table
Let's take an example
Example 1:
<!DOCTYPE
html>
<html>
<head>
<title>Angular JS
Table</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid red;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: yellow;
}
table tr:nth-child(even) {
background-color: blue;
}
</style>
</head>
<body>
<h2>AngularJS Student Table
Example</h2>
<div ng-app = "demoApp"
ng-controller = "stuController">
<table border =
"0">
<tr>
<td>Enter Name:</td>
<td><input type =
"text" ng-model = "student.Name"></td>
</tr>
<tr>
<td>Enter Age
</td>
<td>
<input type =
"text" ng-model = "student.Age">
</td>
</tr>
<tr>
<td>Enter Address
</td>
<td>
<input type =
"text" ng-model = "student.Address">
</td>
</tr>
<tr>
<td>Student details:
</td>
<td>{{student.details()}}</td>
</tr>
</table>
</div>
<script>
var myApp =
angular.module("demoApp", []);
myApp.controller('stuController',
function($scope) {
$scope.student = {
Name:
"Suryosnata",
Age: 25,
Address:"Odisha",
details: function() {
var stuObject;
stuObject =
$scope.student;
return stuObject.Name +
" " + stuObject.Age+" "+stuObject.Address;
}
};
});
</script>
</body>
</html>
Output:
AngularJS Student Table Example
| Enter Name: | |
| Enter Age | |
| Enter Address | |
| Student details: | Suryosnata 25 Odisha |
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Table</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid red;
border-collapse: collapse;
padding: 5px;
}
table
tr:nth-child(odd) {
background-color: yellow;
}
table
tr:nth-child(even) {
background-color: blue;
}
</style>
</head>
<body>
<h2>AngularJS
Employee Table Example</h2>
<div
ng-app = "demoApp" ng-controller = "EmpController">
<table border = "0">
<tr>
<td>Enter first Name:</td>
<td><input type = "text" ng-model = "Employee.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model =
"Employee.lastName">
</td>
</tr>
<tr>
<td>FullName: </td>
<td>{{Employee.fullName()}}</td>
</tr>
<tr>
<td>Department:</td>
<td>
<table>
<tr>
<th>Name</th>.
<th>Code</th>
</tr>
<tr ng-repeat = "demo1 in Employee.Dept">
<td>{{ demo1.name
}}</td>
<td>{{
demo1.CODE}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var
myApp = angular.module("demoApp", []);
myApp.controller('EmpController', function($scope) {
$scope.Employee = {
firstName: "Suryosnata",
lastName: "Behera",
Salary:40000,
Dept:[
{name:'IT', CODE:'10A'},
{name:'BPO',CODE:'80B'},
{name:'KPO',CODE:'90C'},
{name:'MARKETING',CODE:'71E'}
],
fullName: function() {
var empObject;
empObject = $scope.Employee;
return empObject.firstName + " " + empObject.lastName;
}
};
});
</script>
</body>
</html>
Output:
AngularJS Employee Table Example
| Enter first Name: | |||||||||||
| Enter last name: | |||||||||||
| FullName: | Suryosnata Behera | ||||||||||
| Department: | .
|
Python is an open-source, high level, interpreted programming language which offers great opportunities for object-oriented programming. Choosing a python training program from Red Prism Group, which is best training institute for python in noida.
ReplyDelete