Slip 19 - D) Using AngularJS display the Employee details order by salary in Table format (using ng-repeat directive, use Array to store data, use filter)

Solution:

<html>
<head>
<title> Angular JS ASS7Q2
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> 

<div ng-app="myApp" ng-controller="myCtrl">

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', ['$scope',function($scope) {
$scope.myarr=[
            {ename:'Tushar',ecno:'32238',eadd:'Delhi',esal:'2500'},
            {ename:'Mihir',ecno:'12345',eadd:'Pune',esal:'4000'}, 
{ename:'Anurag',ecno:'67890',eadd:'Mumbai',esal:'2000'},
    {ename:'Abhishek',ecno:'47223',eadd:'Pimpri',esal:'3000'}
  
             ]; 
   }]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>Employee Table Acording To Salary : </h1><br>
<table>
    <tr>
    <td><h2><u>E-Name</u>&nbsp&nbsp</h2>
    <td><h2><u>E-Contact no.</u>&nbsp&nbsp</h2>
<td><h2><u>E-Address</u>&nbsp&nbsp</h2>
<td><h2><u>E-Salary</u>&nbsp&nbsp</h2>
    </tr>
    <tr ng-repeat="x in myarr | orderBy : 'esal' ">
    <td><h3> {{ x.ename }} </h3>
    <td><h3> {{ x.ecno }} </h3>
    <td><h3> {{ x.eadd }} </h3>
    <td><h3> {{ x.esal }} </h3>
    </tr>
</table>

</div>
</body>
</html>

Post a Comment

0 Comments