Shulou(Shulou.com)06/01 Report--

Now the company uses ionic, which is based on angularjs to encapsulate some api for webapp. The recent use of angularjs's filter does save a lot of code, so summarize it now!

Ng compares the chicken rib filter, let's go over it here! Chicken soup is commonly used in the following example of filter.

Lowercase (lowercase) {{lastName | lowercase}} uppercase (uppercase) {{lastName | uppercase}} number (formatted number)

The number filter can add thousands of bits to a number, like this, 123456789. To receive a parameter at the same time, you can specify that the small float type retains several decimal places:

{{num | number: 2}} currency (currency processing) {{num | currency:'¥'}} json (formatting json object) {{jsonTest | json}}

The function is the same as the familiar JSON.stringify ().

LimitTo (limit array length or string length) {{childrenArray | limitTo: 3}} / / will display the first three filter (matching substrings) in the array.

It is used to process an array, and then you can filter out the elements that contain a substring and return them as a subarray. It can be an array of strings or an array of objects. If it is an array of objects, you can match the value of the property. It receives a parameter that defines the matching rules for the substring.

Html

Filter matching substring (the following is written for convenience) {{webArr | filter:'n'}} {{webArr | filter: 25}} {{webArr | filter: {name:'l'} {{webArr | filter: fun}}

Js

$scope.webArr = [{name:'nick',age:25}, {name:'ljy',age:28}, {name:'xzl',age:28}, {name:'zyh',age:30}]; $scope.fun = function (e) {return e.age > 25;}

Effect display: filter matching substring (written below for convenience) [{"name": "nick", "age": 25}] [{"name": "nick", "age": 25}] [{"name": "ljy", "age": 28}, {"name": "xzl", "age": 28}] [{"name": "ljy", "age": 28}, {"name": "xzl", "age": 28}, {"name": "zyh") "age": 30}] date class

The date filter should be the simplest of the commonly used filters!

Yyyy-- represents the year

MM-- month (must be capitalized)

Dd-- date

When hh--

Mm-- score (must be lowercase)

Ss-- second

EEEE-- week

Hh:mm-- is a 24-hour system.

H:mma--12 hour system

Among them, year, month, day, hour, minute, second or /:-wait for yourself to try to match!

8 date 1 8 date 2 8 date 3 8 date 4

The display effect of date 1:

2016-11-19 11:59:05 Saturday

The display effect of date 2:

November 19, 2016 12:01PM Saturday

The display effect of date 3:

10:42:09 on November 22nd, 2016

The display effect of date 4:

2016-11-22 11:16:58orderBy ranking (I think the seventh example is the best way to write it)

Ng-repeat generates a separate scope scope, adding pipeline orderBy sorting directly after the ng-repeat loop.

The usage is simple, but there are two points to pay attention to:

Don't forget the parameter quotation marks

Parameter form-directly written as age, not as item2.age.

3 sort by age (default ascending order)

3 sort by age (default ascending order) name age stature

Effect display:

3 sort by age (default ascending order) name ljyage 27stature 165name nickage 25stature 170name xzlage 27stature 175name zyhage 29stature 165,

4 sort by age (if the parameter true is added, it is in reverse order, that is, descending order)

Name age stature

Effect display:

4 sort by age (if you add the parameter true, it is in reverse order, that is, descending order) name zyhage 29stature 165name xzlage 27stature 175name ljyage 27stature 165name nickage 25stature 170

5 I want to go in the ascending order of age and the descending order of height (all in descending order, no effect can be achieved, see example 7) I once wrote about naively ^ * ^

Name age stature

Effect display:

5 want to name zyhage 29stature 165name xzlage 27stature 175name ljyage 27stature 165name nickage 25stature 170in ascending order of age and descending order of height (all in descending order, see example 7)

6 first sort by age by height (write array form with multiple parameters)

Name age stature

Effect display:

6 first sorted by age by height (multiple parameters in the form of an array) name nickage 25stature 170name ljyage 27stature 165name xzlage 27stature 175name zyhage 29stature 165

7 according to the ascending order of age and the descending order of height (write the array form with multiple parameters)

The reverse order can be realized by adding a negative sign before the parameter.

Name age stature

Effect display:

!! 7 in the descending order of height (multiple parameters are written in array form) name nickage 25stature 170name xzlage 27stature 175name ljyage 27stature 165name zyhage 29stature 165in ascending order of age.

Personally, I think many of the built-in filters in ng are chicken ribs. Personalized requirements, custom filters.

Custom filter

A custom filter returns a function, which returns the value you want.

Example:

Angular.module ('youAppName', []) .filter (' youFilterName',function () {return function () {/ / your processing code return result;// returns the value you want}})

Customize a summation filter html!! 1 summation

Usage:

All parameters before and after the pipe are and js

Var nickAppModule=angular.module ('nickApp', []); nickAppModule / / summation .filter (' sumNick',function () {return function () {var arr=Array.prototype.slice.call (arguments), sum=0; for (var I = 0 Lenclassiarr.filter)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.