Search This Blog

Saturday, May 21, 2016

Angular JS Click header link to sort, input into filter text to filter

   <title> Angular JS table sort and filter example </title>
     <script src="../Script/angular.min.js"></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;
     .odd {
       background-color: antiquewhite;
       color: #008b8b;
     td th {
       height: 30px;
       min-width: 100px;
     thead {
       background-color: darkcyan;
       color: white;
       height: 30px;
 <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">
             <a href="" ng-click="order('name')">Name</a>
           <th><a href="" ng-click="order('age')"> Age</a> </th>
           <th><a href="" ng-click="order('gender')">Gender</a> </th>
           <td> <input type="text" ng-model="" /></td>
           <td> <input type="text" ng-model="search.age" /> </td>
           <td><input type="text" ng-model="search.gender" /> </td>
         <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:search" ng-class-odd="'odd'">
           <td>{{ user.age}}</td>
           <td>{{ user.gender}}</td>

No comments:

Post a Comment