number filters in angular

It is use to format a number as a Text.Syntex:
   {{ number_expression | number : fractionSize}}

fractionSize: Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. In the case of the default locale, it will be 3.
Example:

I created a fiddle here with a demo:
https://jsfiddle.net/sk0otnch/

json filters in angular

Format an object to a JSON string.

Example:

limitTo filters in angular

Limits an array/string, into a specified number of elements/characters.

• Arrays: it returns an array containing only the specified number of items.
• Strings: it returns a string containing, only the specified number of characters.

Syntax
         {{ Value | limitTo : limit : begin }}

limit : A number, specifying how many elements to return
begin: Optional. A number specifying where to begin the limitation. Default is 0.

Example:

lowercase filters in angular

To convert string to all lowercase characters.

Example:

Uppercase filters in angular

To convert string to all uppercase characters.

Example:

Order By filter in Angularjs

Order By is used sort an array based on provided expression.

Syntax

   <tr  ng-repeat=arr[] | orderBy : expression : reverse />

Example:

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  $scope.StdDetails = StdDetails;
});

HTML

<div ng-controller="StdController">
  <div>Display in Ascending order</div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:'StdName'">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
  <hr/>
  <div>Display in <strong>descending order</strong> By using <strong>(-) minus sign</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:'-StdName'">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>

  </table>
  <hr/>
  <div>Display in <strong>descending order</strong> By using <strong>reverse arguments</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:'StdName':true">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

OUTPUT

I created a fiddle here with a demo:
https://jsfiddle.net/5wnh2dyp/

AngularJS Filters and types

Filters is used to format the value or data for display in UI

There are two types filters :

1. Standard built-in filter
2. Custom filter

1.Standard built-in filter:

Angularjs provides the following 9 standard built-in filters:

1. uppercase : To convert string to all uppercase characters. Read more..
2. lowercase : To convert string to all lowercase characters. Read more..
3. number : To format a number as a Text.Read more..
4. date :Format a date to a specified format. Read more..
5. currency :Format a number to a currency format. Default currency symbol is $. Read more..
6. orderBy : sort/order an array based on provided expression.It creates an order alphabetically for strings and numerically for numbers. Read more..
7. filter: To Select a subset of elements from an array and return the result in a new array.Read more..
8. json : Format an object to a JSON string.Read more..
9. limitTo : Limits an array/string, into a specified number of elements/characters. Read more..

2. Custom filter :

Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering output. In such a case a custom filter can be created.
You can make your own filters by registering a new filter factory function with your module:
By using filter factor

Example:

var myApp = angular.module('myApp', []);

myApp.filter('StartWith', function() {
  return function(items, char,columnIndex) {
    if (items == undefined || items == null) {
      return items;
    } else {
      var filtered = [];
      //
      var match = new RegExp(char, 'i');
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        
        if (match.test(item[Object.keys(item)[columnIndex]].substring(0,1))) {
          filtered.push(item);
        }
      }
      return filtered;
    }
  };
});

I created a fiddle here with a demo:
 https://jsfiddle.net/L96311ey/

Angularjs $filter use in a controller

filter formats the value of an expression to be displayed to the user.
You can also use $filter in controllers, services, and directives. For this, inject a dependency with the name Filter to your controller/service/directive.

Step #1: Inject $filter to controller:

myApp.controller('NameController', function($scope, $filter) {

}

Step#2: Then wherever you want to use that filter, just use it like 

$filter('currency')

Step#3:If you want to pass arguments to that filter, do it using separate parentheses:

$filter('currency')(arg1, arg2);

arg1 is the array you want to filter on and 
arg2 is the object used to filter.

Example: 
JavaScript:

var myApp = angular.module('myApp', []);
myApp.controller('NameController', function($scope, $filter) {
  $scope.Name = "Mohit";
  $scope.NameUpper = $filter('uppercase')($scope.Name);
  $scope.NameLower = $filter('lowercase')($scope.Name);
  $scope.Currency = $filter('currency')(100, "INR");
});

HTML:

<div ng-controller="NameController">
  <div>Name:{{Name}}</div>
  <div>Name in Upper:{{NameUpper}}</div>
  <div>Name in Lower:{{NameLower}}</div>
  <div>Currency:{{Currency}}</div>
</div>

Code available in https://jsfiddle.net/g2fLzy9L/

Sorting objects array in descending/ascending order in javascript

If you want to orderby in javascript file not in HTML.

Example:

JavaScript:

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope, $filter) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  var Dscfiltered = $filter('orderBy')(StdDetails, 'StdName', 1);
  $scope.StdDetailsDsc = Dscfiltered;
  var Ascfiltered = $filter('orderBy')(StdDetails, 'StdName', 0);
  $scope.StdDetailsAsc = Ascfiltered;
});

HTML
<div ng-controller="StdController">
  <div>Display in <strong>dscending order</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetailsDsc">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
  <hr/>
  <div>Display in <strong>ascending order</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetailsAsc">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

 Screen capture of JavaScript file:


I created a fiddle here with a demo:

https://jsfiddle.net/fat0h73o

Dynamic sorting on table header click in Angular

By using of angularjs orderBy filter to sort table data dynamic or user header click event.

Example:
Java Script:

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  $scope.StdDetails = StdDetails;
  $scope.SortcolumnName = "StudentName";
  $scope.reverseSort = false;
  $scope.OrderOf = "descending";
  $scope.SortTable = function(colName) {
    $scope.reverseSort = (colName == $scope.SortcolumnName) ? !$scope.reverseSort : false;
    $scope.SortcolumnName = colName;
    $scope.OrderOf = $scope.reverseSort ? "ascending" : "descending";
  }
  $scope.cssHeaderSort = function(colName) {
    if (colName == $scope.SortcolumnName) {
      return $scope.reverseSort ? "arrow-up" : "arrow-down";
    }
    return '';
  }

});

HTML
<div ng-controller="StdController">
  <div>Display in<b> {{OrderOf}} order</b></div>
  <hr/>
  <table>
    <tr>
      <th ng-click="SortTable('StudentName')">Student Name
        <div ng-class="cssHeaderSort('StudentName')"></div>
      </th>
      <th ng-click="SortTable('Class')">Class
        <div ng-class="cssHeaderSort('Class')"></div>
      </th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:SortcolumnName:reverseSort ">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

I created a fiddle here with a demo:
https://jsfiddle.net/hxktbcms/

Controller in Angular

• It is responsible to control the relation between models and views.
• It responds to user input and performs interactions on the data model objects.
• The controller receives input, validates it, and then performs business operations that modify the state of the data model.
• It is a JavaScript function.
• A controller is associated with a HTML element with the ng-controller directive.

In JS

Declaration Type #1           
 var myController = function(){ 
                                      //Business logic  
               } 
  myApp.controller(“myController”, myController);       

Declaration Type #2          
    myApp.controller(“myController”, function(){

                    //Business logic

                 });

In Html       
  <div ng-controller=‘myController’> </div>

Post method in angularjs by using $http with parameters

Call WebAPI/Controller and Post the object.

Get method in angularjs by using $http with parameters