AngularJS Tables

1. How to display data in tables?

The data is displayed in tables using angular js.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myController">
<table border="0">
<tr>
<td>
First Name: </td>
<td><input type="text" ng-model="fName"></td></tr>
<tr>
<td>Last Name:</td>
<td><input type="text" ng-model="lName"></td></tr>
<tr>
 <td>Name: </td><td>{{fName + " " + lName}}</td>
</div>
<script>
var myFirstApp= angular.module('myFirstApp', []);
myFirstApp.controller('myController', function($scope) {
    $scope.fName = 'ABC';
    $scope.lName = "Learn";
});
</script>
</body>
</html>

 

2. How to display styles in CSS?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<style>
table,tr,td{border:1px solid black;
border-collapse:collapse;padding:4px;
</style>
<body>
<div ng-app="myFirstApp" ng-controller="myController">
<table border="1">
<tr>
<td>
First Name: </td>
<td><input type="text" ng-model="fName"></td></tr>
<tr>
<td>Last Name:</td>
<td><input type="text" ng-model="lName"></td></tr>
<tr>
 <td>Name: </td><td>{{fName + " " + lName}}</td>
</div>
<script>
var myFirstApp= angular.module('myFirstApp', []);
myFirstApp.controller('myController', function($scope) {
    $scope.fName = 'ABC';
    $scope.lName = "Learn";
});
</script>
</body>
</html>