Filter filter usage in Angularjs fully parse _angularjs

In the Angularjs world, Filter provides a way to format data, angular also gives us a lot of built-in filters, and it's quite simple to create custom filters.

In the template bindings {{}} of HTML, we use the | To invoke the filter, for example, we want the string to display all uppercase characters:

{{name | uppercase}}

Of course, we can also use the $filter service in JavaScript to invoke the filter, and then capitalize the string to give an example:

App.controller (' Democontroller ', [' $scope ', ' $filter ', 
 function ($scope, $filter) {
 
  $scope. Name = $filter (' Lowercase ') (' Ari ');
}];

How do I pass parameters to filter? Just put the parameter after filter, with a colon in the middle (if you have multiple arguments to pass, and a colon after each parameter) for example, a digital filter can help us limit the number of digits, and if you want to display two decimal digits, add number:2.

{{123.456789 | number:2}}

The filter filters are used primarily to filter an array of data and return a new array containing the data of the child array.

For example, when searching on a client, we can quickly filter out the results we want from the array.

This filter method receives a string,object, or a function parameter is used to select/move an array element.

The next full of our specific view:

One, built-in filter
1,uppercase,lowercase size Conversion

{{' Lower cap string ' | uppercase}}   Result: LOWER CAP STRING 
{{"TANK is good" | lowercase}}     //results: TANK is good 

The vertical line here is a pipe function, if you are familiar with Linux, this piece of the | root Linux piping function, basically the same 2,json format

{{{foo: ' Bar ', baz:23} | json}}  Result: {"foo": "Bar", "Baz": 23} 

Note: The BZA has no double quotes before formatting and is converted to JSON data after formatting.

3,date format

MySQL timestamp ng-bind= "Message.time * 1000 | Date: ' Yyyy-mm-dd '

{{1304375948024 | date: ' Medium '}}   May, 06:39:08 PM 
{{1304375948024 | date}}             /Result: May 3 
{1304375948024 | date: "MM/DD/YYYY @ h:mma '}   //results: 05/03/2011 @ 6:39am 
{{1304375948024 | date: ' YYYY-MM-DD hh:mm:ss '}}  //results: 2011-05-03 06:39:08 

4,number format

{{1.234567 | number:1}}  Result: 1.2  
{1234567 | number}}    //results: 1,234,567  

5,currency Currency format

{{currency}}}         Result: $250.00  
{{| currency: "Rmb￥"}}    //Result: rmb￥250.00  

6,filter Lookup can only search value, can not check key

{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "," id ":", "name": "Test ABC"} 
] | Filter: ' s '}  //Find rows containing S/ 
 
//Previous results: [{"Age": "id": one, "name": "Sunm Xing"},{"Age": "," id ":" A, "name": "Test ABC '}] 
 
{{{' age ': "id": Ten, "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "12" , "name": "Test ABC"} 
] | filter:{' name ': ' IP '}}///  Find row//above for name like IP 
result: [{"Age": "id": "Name": "iphone"}] 
 
$filter (' Number ') (30000, 2); 
var jsonstring = $filter (' json ') ({"Age":, "id": one, "name": "Sunm Xing"},{"Age": "," id ":", "name": "Test ABC"}]) 

7,limitto string, interception of the image

{{' I love Tank ' | limitto:6}}      Result: I love 
{{"I love Tank" | limitto:-4}}     //results: Tank 
 
{{{"Age": "id": Ten, "Name": "iphone"}, 
{"Age": "id": one, "name": "Sunm Xing"}, 
{"Age":, "id": "Name": "Test ABC"} 
] | limitto:1}}   //Result: [{"Age": 20, " ID ": Ten," Name ":" iphone "}] 

8,orderby sort of image

{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age":, "id": "Name" ":" Test ABC "} 
] | By: ' ID ': true}}    //root ID Descending row 
 
{{[{' Age ': ' id ': ' ' name ': ' iphone '}, 
{' Age ': ', ' id ': ', ' name ': ' Sunm Xing "}, 
{" Age ":," id ": 20," name ":" Test ABC "} 
] |/order: ' ID '}}      //////////According to ascending ID ({{ 
 
" age '): " ID ": Ten," Name ":" iphone "}, 
{" Age ": one," id ": one," name ":" Sunm Xing "}, 
{" Age ":", "id": "," name ":" Test abc "}< c24/>] | orderby:['-age ', ' Name '}} 

Second, the custom filter function
The filter is also simple to customize, using the Filter method of module, which returns a function that receives the input value and returns the processed result.

App.filter (' Filter name ', function () {return 
  function (object to filter, filter parameter 1, filter parameter 2,...) { 
    //... Do some things return  
    the processed object; 
  } 
);  

I found a basic ANGULARJS MVC framework, Phonecat, and the custom filter is written on this basis, and the framework is pretty handy.
Filters.js Add a module

Angular.module (' Tanktest ', []). Filter (' Tankreplace ', function () {return 
  function (input) { 
    return Input.replace (/tank/, "=====") 
  }; 
 

Called in HTML

{{' TANK is good ' | Lowercase |tankreplace}}  Result: ===== is good 

Note: | Lowercase |tankreplace Pipeline command can have multiple

Yourapp.filter (' Orderobjectby ', function () {return 
 function (items, field, reverse) { 
  var filtered = []; 
  Angular.foreach (items, function (item) { 
   Filtered.push (item); 
  }); 
  Filtered.sort (function (A, b) {return 
   (A[field] > B[field]? 1:-1); 
  }); 
  if (reverse) filtered.reverse (); 
  return filtered;}; 
 

The filter converts the object into a standard array and sorts it through the fields you specify. You can use the Orderobjectby filter to resemble order by, including a Boolean value after the field name, to specify whether the sequence should be reversed. In other words, the false is ascending, the real drop. HTML call

<li ng-repeat= "Item in Items | Orderobjectby: ' Color ': True ' >{{item.color}}</li> 

Sort Search

<input type= "text" ng-model= "search" class= "Form-control" placeholder= "search" > <thead> <tr> & lt;! --ng-class= ' {dropup:true} '--> <th ng-click= ' changeorder (' id ') ' ng-class= ' {dropup:order = = '} ' > production Product number <span ng-class= "{Ordercolor:ordertype = = ' id '}" class= "caret" ></span> </th> <t H ng-click= "Changeorder (' name ')" ng-class= "{dropup:order = = = '}" > Product name <span ng-class= "{ordercolor: OrderType = = ' name '} ' class= ' caret ' ></span> </th> <th ng-click= ' changeorder (' price ') ng-clas s= "{Dropup:order = ="} "> Product price <span ng-class=" {ordercolor:ordertype = = ' Prices '} "class=" caret " ;</span> </th> </tr> </thead> <tbody> <tr ng-repeat= "Item in Productdata | Filter:search | Orderby:order + ordertype "> <td>{{item.id}}</td> <td>{{item.name}}</td> &LT;TD&G T {{Item.price | 

 Currency: ' ￥ '}}</td> </tr> </tbody>

Angularjs

The default sort field 
$scope. OrderType = ' id '; 
 
$scope. Order = '-'; 
 
$scope. Changeorder = function (type) { 
  console.log (type); 
  $scope. OrderType = type; 
 
  if ($scope. Order = = ") { 
    $scope. Order = '-'; 
  } else{ 
    $scope. Order = '; 
  } 
}