AngularJS Display table header in uppercase

In this AngularJS example you will learn how to display table header in uppercase. In this example you will learn how to use uppercase function to display tow header in uppercase in HTML table.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Try Now" button given at the bottom.

Syntax

<table>  
	<th>{{'Name' | uppercase }}</th><th>{{'Last Name' | uppercase }}</th>
	<th>{{'Designation' | uppercase }}</th>  
	<th>{{'Salary' | uppercase }}</th><th>{{'Phone' | uppercase }}</th>  
	<tr ng-repeat="emp in employees" ng-class-odd="'odd'" ng-class-even="'even'">  
	<td>{{ emp.firstName }}</td>  
	<td>{{ emp.lastName }}</td>  
	<td>{{ emp.jobTitle }}</td>  
	<td>{{ emp.salary }}</td>  
	<td>{{ emp.phone }}</td>  
	</tr>  
</table>   

AngularJS Display table header in uppercase Example

<!DOCTYPE html>              
<html>              
<head> <!-- www.techstrikers.com -->               
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</script>                
    <meta charset="utf-8">              
    <title>AngularJS Display table header in uppercase code Example</title>  
 <style>  
  table { width:100%;}
  table, th , td  {  
  border: 1px solid grey;  
  border-collapse: collapse;  
  padding: 5px;  
  font-family:arial;  
  }
  .odd {
  background-color: #ffffff;
  }
  .even {
    background-color: #f1f1f1;
  }
  </style>  
  <script>              
var app = angular.module('app', []);              
    app.controller("appController", function ($scope) {        
    $scope.employees = [{    
        firstName:"Jimi",    
        lastName:"Scott",    
        jobTitle:"Developer",    
        salary:20000,    
        phone:"345-333-7845"    
      },    
      {    
          firstName:"Bailey",    
          lastName:"Lee",    
          jobTitle:"Lead",    
          salary:30000,    
          phone:"322-121-213"    
      },    
      {    
          firstName:"Aura",    
          lastName:"Martin",    
          jobTitle:"QA",    
          salary:35000,    
          phone:"322-333-0987"    
      },    
      {    
          firstName:"Austin",    
          lastName:"Williams",    
          jobTitle:"Designer",    
          salary:20000,    
          phone:"322-265-2321"    
      },    
      {    
          firstName:"Bara",    
          lastName:"Miller",    
          jobTitle:"Tester",    
          salary:15000,    
          phone:"322-890-2321"    
      },{    
          firstName:"Carlton",    
          lastName:"Taylor",    
          jobTitle:"Manager",    
          salary:45000,    
          phone:"322-456-2321"    
      },    
      {    
          firstName:"Adisa",    
          lastName:"White",    
          jobTitle:"Developer",    
          salary:25000,    
          phone:"121-333-2321"    
      }];    
    });       
</script>              
</head>              
<body style="background-color:#DDE4E9;font-family:arial;">              
  <fieldset style="background-color:#DDE4E9;">                          
    <legend>AngulerJS Display table header in uppercase 
	code Example</legend>               
  <div ng-app="app">       
    <div ng-controller="appController">       
      <table>  
        <th>{{'Name' | uppercase }}</th><th>{{'Last Name' | uppercase }}</th>
		<th>{{'Designation' | uppercase }}</th>  
        <th>{{'Salary' | uppercase }}</th><th>{{'Phone' | uppercase }}</th>  
        <tr ng-repeat="emp in employees" ng-class-odd="'odd'" ng-class-even="'even'">  
          <td>{{ emp.firstName }}</td>  
          <td>{{ emp.lastName }}</td>  
          <td>{{ emp.jobTitle }}</td>  
          <td>{{ emp.salary }}</td>  
          <td>{{ emp.phone }}</td>  
        </tr>  
</table>  
  </div>      
</div>              
</div>              
 </fieldset>               
</body>              
</html>

See Live Example

« Previous