Searching, Sorting, Rows Count, Mouseover Filter In AngularJS

Gururaj Jewargi
8y
3.5k
0
1

Blog

AngularJs.zip

Step 1- Create a new ASP.NET web application.
Step 2- Create a table.html.

Step 3- Add the bootstrap CSS and AngularJS files in CSS and JS folders respectively.

Step 4- Create an images folder and add images in the folder.

Step 5 - Table.html source code can be copied from here.

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/angular.js"></script>
<script>
var obj = angular.module("myApp", []);
obj.controller("EmpController", function($scope) {
//list of data
$scope.array = [{
eno: 1,
ename: "Gururaj",
esal: 17000,
pic: 'guru.jpg'
}, {
eno: 2,
ename: "Bhimashankar",
esal: 30000,
pic: 'bhima.jpg'
}, {
eno: 3,
ename: "Rahul",
esal: 26000,
pic: 'rahul.jpg'
}, {
eno: 4,
ename: "Vishawanath",
esal: 16500,
pic: 'vishwa.jpg'
}, {
eno: 5,
ename: "Laxmikanth",
esal: 15000,
pic: 'laxmi.jpg'
}, {
eno: 6,
ename: "Sachin",
esal: 22000,
pic: 'sachin.jpg'
}, {
eno: 7,
ename: "Bhojaraj",
esal: 15000,
pic: 'bhoju.jpg'
}];
//onmouse over image should be large
$scope.image = 'guru.jpg';
$scope.name = "Gururaj";
$scope.salary = "17000";
$scope.update = function(arg, nme, sal) {
$scope.image = arg;
$scope.name = nme;
$scope.salary = sal;
}
//sort the data through eno properties
$scope.isReverse = false;
$scope.enamesortType = 'ename';
});
</script>
<style>
/*based on even number row color should be change*/
.red {
color: red;
background-color: #efedca;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="EmpController">
<div class="container row col-md-12">
<div class="col-md-4">
<h3> Number of Employees : <span class="label label-warning">{{array.length}}</span> </h3>
<h3>Sort by Names</h3> <input id="Text1" type="text" ng-model="Names" />
<h3>Sort by Salary</h3> <select ng-model="Salary">
<option value="">All</option>
<option>15000</option>
<option>25000</option>
<option>30000</option>
<option>16000</option>
<option>20000</option>
</select>
<h3> Number of Rows</h3> <select ng-model="scount">
<option>All</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
</select> </div>
<div class="col-md-4">
<table border="1" class="table table-bordered">
<tr class="bg-success">
<th><a href="#" ng-click="isReverse=!isReverse"> E.No</a></th>
<th>Name</th>
<th>Salary</th>
<th>Picture</th>
</tr>
<tr ng-repeat="items in array |filter:Names |filter:Salary |limitTo:scount |orderBy:sortType:isReverse" ng-class-even="{red:true}">
<td>{{items.eno}}</td>
<td>{{items.ename}}</td>
<td>{{items.esal|currency:"₹"}}</td>
<td><img ng-src="img/{{items.pic}}" data-ng-mouseover="update(items.pic,items.ename,items.esal)" style="height:70px; width:70px;border-radius:50%" /></td>
</tr>
</table>
</div>
<div class="col-md-4">
<img ng-src="img/{{image}}" style="height:250px;width:220px;box-shadow:0px 0px 10px green;padding:10px;margin:20px" />
<div class="alert alert-success"> <strong>Employee Name:</strong> {{name}} <strong>Salary:</strong>{{salary}} </div>
</div>
</div>
</div>
</body>
</html>

Step 6 - Run the table.html file in your browser.

Up Next

Sorting, Paging And Filter Grid Using AngularJS

Ebook Download

View all

Azure in 24 Days

Read by 0 people

Download Now!

Learn

View all