The largest Interview Solution Library on the web


java tutorials/
« Previous | 1 | 2 | 3 | Next »
Angular JS Table

AngularJS Table,Row,Column Application

Enter first name:
Enter last name:
Name: {{emp.fullName()}}
Subject: .
NameMarks
{{ subject.name }} {{ subject.marks }}
<html>
<head>
<title>Angular JS Table</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Table,Row,Column Application</h2>
<div ng-app = "mainApp" ng-controller = "empController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "emp.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "emp.lastName">
</td>
</tr>
<tr>
<td>Name: </td>
<td>{{emp.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in emp.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('empController', function($scope) {
$scope.emp = {
firstName: "aarif",
lastName: "mohammad",
fees:500,
subjects:[
{name:'java',marks:70},
{name:'jsf',marks:80},
{name:'spring',marks:65},
{name:'hibernate',marks:65},
{name:'angularJS',marks:60}
],
fullName: function() {
var empObject;
empObject = $scope.emp;
return empObject.firstName + " " + empObject.lastName;
}
};
});
</script>
</body>
</html>
« Previous | 1 | 2 | 3 | Next »
copyright © 2014 - all rights riserved by javatechnologycenter.com