Friday 25 October 2013

AngularJS - Sorting Array Items using Angularjs.


Sorting Array Items using AngularJS.


Part 6:

Array binding tutorial refer : Array binding concept

Sorting is a processes of arranging the items. Ascending or Descending order performing in the array of items. A standard order is often called ascending order [ex :  0 to 9, A to Z], the reverse processes is descending order [ex: Z  to A, 9 to 0].

The order processes in array items using angularjs. It's using ng-repeat module. 
The ng-repeat  is extracting single item from array items and using orderBy reserved word.


Sample Code:



index.html

<!DOCTYPE html>

<!--html tag starts and module - ng-app-->                                                                               
<html ng-app>     

          <!--head tag starts-->   

          <head>           

                    <!--script files-->                                                                                     

                    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs     /angularjs/1.0.8/angular.min.js"></script>

                    <script type="text/javascript" src="controller.js"></script>

                                        
          </head><!--head tag ends-->                                                                                                                   

          <!--body tag tarts-->                                                                                         

          <body>                   

                    <!--controller div starts-->                                                                                                

                    <div ng-controller="Ctrl">

                             <!--sort form starts-->                                                                                       

                             <form name="sortForm">

                                        <!--product table starts-->                                            

                                        <table>                                                                                    
                                                  <thead> 
                                                         <th>Product</th> 
                                                         <th>Price</th>                                            
                                                  </thead>

                                                  <!--ng-repeat and products is an array-->                                                                         <tr ng-repeat="product in products | orderBy : sortingOrder : reverse">                           

                                                        <td>{{product.Product}}</td>          
                                                        <td>{{product.Price}}</td>
                                                  
                                                  </tr>                                   
                                        </table><!--product table ends-->                                               
                              </form><!--sort form ends-->
                                                                                     
                    <button type="btn" ng-click="sortOrder('Product')">Sort Order</button>          </div><!--controller div ends-->
</body><!--body tag ends-->                                                                                         
</html><!--html tag ends--> 


Description :


The ng-app is one of the angular module. It's root of the angularjs models and directives. This module is manage the controllers, services, factory, directives. Single module is contain multiple controllers.

The controller name is "Ctrl". The controller is controlling the data members and member methods. The controller is used for retrive data from database.

The Products is an array. This array is contains product list and prices.  ex: COMPUTER, TABLET, IPHONE, SAMSUNG, NOKIA. In this, accessing array use the ng-repeat model.

Finally, click the button , sortOrder() method goes to controller file.


Controller.js  


//controller statements
function Ctrl($scope)
{

$scope.products = [

                           { Product : 'COMPUTER', Price : '$450'},
                           {Product : 'TABLET', Price : '$150'},
                           {Product : 'IPHONE', Price : '$200'},
                           {Product : 'SAMSUNG', Price : '$150' },
                           {Product : 'NOKIA', Price : '$150'}

                           ]; 

     //function sortOrder definitation

     $scope.sortOrder = function(newSortingOrder)
     {
               $scope.sortingOrder = newSortingOrder;
               $scope.reverse =! $scope.reverse;
     };
};    
                                                                                                

Sample Output:


Ascending Order Products:



Descending Order Products: 




If you have any doubt about this concept means post comments.

Touch with me! Gain more!




No comments:

Post a Comment