ANGULARJS Filter Filters Primer

In development, this scenario is often encountered

such as the user's gender is divided into "male" and "female", in the database to save the value of 1 and 0, the user in view of their own gender when the back end of the value is naturally 1 or 0, the front end to be converted to "male" or "female" display again;

If I want to change a badminton racket, a cat on the badminton racket brand up to dozens of kinds, I would like to view the Yonex this brand of badminton racket alone;

Buy a badminton racket I also want to buy a bucket of badminton, click on the sales order display products;

The above three scenarios for data conversion/filtering/sorting, in a word, the data is formatted, ANGULARJS filter is used to do this thing.

Built-in filters

Angularjs has a number of filters built into the HTML template's binding symbol {{}} to invoke the filter

If the letter is converted to uppercase: $scope. Name= ' Wangmeijian '

{{name | uppercase}}//Output Wangmeijian

Numbers to thousands of decimal notation: $scope. num = 12345678

{num | number}}//Output 12,345,678

Date formatting: $scope. Date=new date ()

{{date | date: ' YY-MM-DD '}}//Output 2015-11-19

Number formatted as currency: $scope. num=987654321

{{num | currency: ' ¥ '}}//Output ¥987,654,321.00

Demo Stamp Here

A slightly more complex filter, ' filter ', can return a subset of a given array, which receives a parameter, which can be a string, an object, a function

String: Returns all elements that contain this string and wants to return an element that does not contain this string before adding it!

Demo

{[' Wang ', ' Mei ', ' Jian '] | filter: ' A '}}//Returns the element containing the letter a [' Wang ', ' Jian ']

Object: Angular will compare the properties of the object to be filtered against the property of the same name in the object, if the property value is a string to determine whether to include the string (note that this is the inclusion, does not need to be exactly equal)

Demo

{{[    {        name: ' Wangmeijian ',        sex: ' Boy '    },    {        name: ' Bokeyuan ',        sex: ' Sex '    }   ] | filter:{        Sex: ' Bo '}
}}

Output [{"Name": "Wangmeijian", "Sex": "Boy"}]

Function: Executes the function on each element, the element that returns a non-false value appears in the new array and returns

Demo

$scope. GetNumber = function (n) {
return!isnan (n);
}

{{[' demo ', 2,3] | filter:getnumber}}//output [2,3]

Custom Filters

When built-in functions do not meet your business needs, you need to customize a filter, the custom filter returns a function, the function's parameters are the HTML template | The left side of the data, it will automatically pass into the filter

For example, the requirement is to capitalize each word in a sentence

<!--output Hello, Welcome to bokeyuan!--<script type= "Text/javascript" >varApp = Angular.module (' app ', []). Controller (' Mycontroller ', [' $scope ',function($scope) {$scope. str= ' Hello, welcome to bokeyuan! '}]). Filter (' Capitalize ',function(){            return function(str) {vararr = Str.split (/\s+/);  for(vari = 0; i < arr.length; i++) {Arr[i]= Arr[i].substr (0,1). toUpperCase () + arr[i].slice (1);                }; returnArr.join ("")            }        })        </script> </body>
It is important to note that when the parameter of the built-in filter ' filter ' is a function, the function is executed for each element of the array, and the custom filter is the function that the array object executes its return.
The Goody God
Source: Http://www.cnblogs.com/wangmeijian
This article copyright belongs to the author and blog Garden All, welcome reprint, reprint please indicate source.
If you feel that this blog post for your gain, please click on the bottom right corner of the [recommended], Thank you!
ANGULARJS Filter Filters Primer