Post
Ask Question

Searching, Sorting, Rows Count, Mouseover Filter In AngularJS

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.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <link href="css/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="js/angular.js"></script>  
  8.     <script>  
  9.         var obj = angular.module("myApp", []);  
  10.         obj.controller("EmpController", function($scope) {  
  11.             //list of data  
  12.             $scope.array = [{  
  13.                 eno: 1,  
  14.                 ename: "Gururaj",  
  15.                 esal: 17000,  
  16.                 pic: 'guru.jpg'  
  17.             }, {  
  18.                 eno: 2,  
  19.                 ename: "Bhimashankar",  
  20.                 esal: 30000,  
  21.                 pic: 'bhima.jpg'  
  22.             }, {  
  23.                 eno: 3,  
  24.                 ename: "Rahul",  
  25.                 esal: 26000,  
  26.                 pic: 'rahul.jpg'  
  27.             }, {  
  28.                 eno: 4,  
  29.                 ename: "Vishawanath",  
  30.                 esal: 16500,  
  31.                 pic: 'vishwa.jpg'  
  32.             }, {  
  33.                 eno: 5,  
  34.                 ename: "Laxmikanth",  
  35.                 esal: 15000,  
  36.                 pic: 'laxmi.jpg'  
  37.             }, {  
  38.                 eno: 6,  
  39.                 ename: "Sachin",  
  40.                 esal: 22000,  
  41.                 pic: 'sachin.jpg'  
  42.             }, {  
  43.                 eno: 7,  
  44.                 ename: "Bhojaraj",  
  45.                 esal: 15000,  
  46.                 pic: 'bhoju.jpg'  
  47.             }];  
  48.             //onmouse over image should be large  
  49.             $scope.image = 'guru.jpg';  
  50.             $scope.name = "Gururaj";  
  51.             $scope.salary = "17000";  
  52.             $scope.update = function(arg, nme, sal) {  
  53.                     $scope.image = arg;  
  54.                     $scope.name = nme;  
  55.                     $scope.salary = sal;  
  56.                 }  
  57.                 //sort the data through eno properties  
  58.             $scope.isReverse = false;  
  59.             $scope.enamesortType = 'ename';  
  60.         });  
  61.     </script>  
  62.     <style>  
  63.         /*based on even number row color should be change*/  
  64.           
  65.         .red {  
  66.             color: red;  
  67.             background-color: #efedca;  
  68.         }  
  69.     </style>  
  70. </head>  
  71.   
  72. <body ng-app="myApp">  
  73.     <div ng-controller="EmpController">  
  74.         <div class="container row col-md-12">  
  75.             <div class="col-md-4">  
  76.                 <h3> Number of Employees : <span class="label label-warning">{{array.length}}</span> </h3>  
  77.                 <h3>Sort by Names</h3> <input id="Text1" type="text" ng-model="Names" />  
  78.                 <!--sortout based on salary -->  
  79.                 <h3>Sort by Salary</h3> <select ng-model="Salary">  
  80. <option value="">All</option>  
  81. <option>15000</option>  
  82. <option>25000</option>  
  83. <option>30000</option>  
  84. <option>16000</option>  
  85. <option>20000</option>  
  86. </select>  
  87.                 <!--select number of rows to display-->  
  88.                 <h3> Number of Rows</h3> <select ng-model="scount">  
  89. <option>All</option>  
  90. <option>2</option>  
  91. <option>4</option>  
  92. <option>6</option>  
  93. <option>8</option>  
  94. </select> </div>  
  95.             <div class="col-md-4">  
  96.                 <table border="1" class="table table-bordered">  
  97.                     <tr class="bg-success">  
  98.                         <th><a href="#" ng-click="isReverse=!isReverse"> E.No</a></th>  
  99.                         <th>Name</th>  
  100.                         <th>Salary</th>  
  101.                         <th>Picture</th>  
  102.                     </tr>  
  103.                     <tr ng-repeat="items in array |filter:Names |filter:Salary |limitTo:scount |orderBy:sortType:isReverse" ng-class-even="{red:true}">  
  104.                         <td>{{items.eno}}</td>  
  105.                         <td>{{items.ename}}</td>  
  106.                         <td>{{items.esal|currency:"₹"}}</td>  
  107.                         <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>  
  108.                     </tr>  
  109.                 </table>  
  110.             </div>  
  111.             <div class="col-md-4">  
  112.                 <!--onmouseover image shoule be large--><img ng-src="img/{{image}}" style="height:250px;width:220px;box-shadow:0px 0px 10px green;padding:10px;margin:20px" />  
  113.                 <div class="alert alert-success"> <strong>Employee Name:</strong> {{name}} <strong>Salary:</strong>{{salary}} </div>  
  114.             </div>  
  115.         </div>  
  116.     </div>  
  117. </body>  
  118.   
  119. </html>  
Step 6 - Run the table.html file in your browser.
Next Recommended Reading Sorting, Paging And Filter Grid Using AngularJS