Angularjs table via sorting and filter on columns example

Angularjs table example

This post provides an example about how create a table via sort and filter features.
Following directives and services in angularjs will be used:

orderby
filter
ng-click
ng-model
ng-repeat
ng-init

 <html>  
 <head>  
   <title> Angular JS table sort and filter example </title>  
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
   <script>  
     var app = angular.module('MyForm', []);  
     app.controller('myCtrl', function ($scope) {  
       $scope.predicate = 'name';  
       $scope.reverse = true;  
       $scope.order = function (predicate) {  
         $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
         $scope.predicate = predicate;  
       };  
     });  
   </script>  
   <style>  
     .odd {  
       background-color: antiquewhite;  
       color: #008b8b;  
     }  
     td th {  
       height: 30px;  
       min-width: 100px;  
     }  
     thead {  
       background-color: darkcyan;  
       color: white;  
       height: 30px;  
     }  
   </style>  
 </head>  
 <body ng-app="MyForm" ng-controller="myCtrl">  
   <h3>List students</h3>  
   <div ng-init=" students = [  
            {name: 'Kevin', age: 25, gender: 'boy'},  
            {name: 'John', age: 30, gender: 'girl'},  
            {name: 'Laura', age: 28, gender: 'girl'},  
            {name: 'Joy', age: 15, gender: 'girl'},  
            {name: 'Mary', age: 28, gender: 'girl'},  
            {name: 'Peter', age: 95, gender: 'boy'},  
            {name: 'Bob', age: 50, gender: 'boy'},  
            {name: 'Erika', age: 27, gender: 'girl'},  
            {name: 'Patrick', age: 40, gender: 'boy'},  
            {name: 'Tery', age: 60, gender: 'girl'}  
           ] ">  
     <pre>Click header link to sort, input into filter text to filter</pre>  
     <hr />  
     <table class="table table-striped">  
       <thead>  
         <tr>  
           <th>Edit</th>  
           <th>  
             <a href="" ng-click="order('name')">Name</a>  
           </th>  
           <th><a href="" ng-click="order('age')"> Age</a> </th>  
           <th><a href="" ng-click="order('gender')">Gender</a> </th>  
         </tr>  
       </thead>  
       <tbody>  
         <tr>  
           <td>Filter =>></td>  
           <td> <input type="text" ng-model="search.name" /></td>  
           <td> <input type="text" ng-model="search.age" /> </td>  
           <td><input type="text" ng-model="search.gender" /> </td>  
         </tr>  
         <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:search" ng-class-odd="'odd'">  
           <td>  
             <button class="btn">  
 Edit  
             </button>  
           </td>  
           <td>{{ user.name}}</td>  
           <td>{{ user.age}}</td>  
           <td>{{ user.gender}}</td>  
         </tr>  
       </tbody>  
     </table>  
   </div>  
 </body>  
 </html>

Run it on plnkr.co

Next version will add paging and edit in row.

Thanks for your time reading

AngularJS Tutorials

Pages

Angularjs table via sorting and filter on columns example

Angularjs table example

2 comments:

AngularJS tags

Popular Posts