Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom Filters in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 286
    Comment on it

    Hope you are doing good today.
    Today on My blog, I am going to explain how you can create Custom Filters in AngularJS. Filters are an important part in AngularJS which used to format data

    First Create an index.html page and put required library file in  <head></head> section:

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    Here we are using ng-click directive, which changed the behavior when an element is clicked.

    <h1>Custome Sorting</h1>
    				<h2>short data by Name & Country</h2>
    				<div ng-app="myapp" ng-controller="mycnt"> 
    					<table border='1'>
    						<tr>
    							<td>Sr.No</td>
    							<td ng-click="orderByMe('name')" ><b>Name</b></td>
    							<td  ng-click="orderByMe('country')"><b>Country</b></td>						
    						</tr>
    						<tr ng-repeat="x in names | orderBy :myOrderBy" >
    							<td>{{$index + 1}}</td>
    							<td>{{x.name}}</td>
    							<td>{{x.country}}</td>						
    						</tr>
    					</table>				
    				</div>

    AngularJS Script for shorting.

    <script type="text/javascript">
    var app=angular.module('myapp', []);
    	 app.controller('mycnt', function($scope) {  
    	 	//Assign the value 
         $scope.names = [  
    			        {name:'Ramesh',country:'India'},  
    			        {name:'Rafi',country:'India'},  
    			        {name:'Alex',country:'USA'},  
    			        {name:'Pooja',country:'India'},  
    			        {name:'Mahesh',country:'India'},          
    			        {name:'Ramanujam',country:'India'},   
    			        {name:'Johnson',country:'UK'},  
    			        {name:'Karl',country:'Russia'}  
            		];  
      //send the value to orderByMe
        $scope.orderByMe = function(x) {  
            $scope.myOrderBy = x;  
        }  
    }); 
    </script>

    I hope this will help you. Please feel free to give us your feedback in comments.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: