angularjs--Filter

First, filter

Filter: Filter Some data by some rules to get the results you want.

Here's a look at some of the filters in Angularjs:

1. Currency (currency filter)

Usage: {{number | currency: "Symbol for money or English": Keep several (rounding) after decimal point}}

Example: {{1000|currency: ' ￥ ': 2}}

Results: ￥1,000.00

2. Date (dates)

Usage: {{time |date: ' Time Format '}}

Example: {' 1477838110579 ' |date: ' Yyyy-mm-dd hh:mm:ss eeee '}}

Results: 2016-10-30 10:35:10 Sunday

3. JSON (JSON format)

Usage: {{JSON data |json}}

Example:<pre>{{friends|json}}</pre>

<script>    var app=angular.module ("myApp", []);    App.controller ("Myctrl",function($scope) {        $scope. Friends=[            {name:"John ", Phone:" 555-1276 "},            {name:" Mark ", Phone:" 655-1276 "},            {name:" Annie ", Phone:" 955-1276 "},            {name:" Joe ", Phone:" 255-1276 "},            {name:" Tom ", Phone:" 655-1276 "},            {name:"Lilie", Phone: "855-1276"},        ]    }) </scripe>

Results:

[  {    "name": "John",    "phone": "555-1276"  },  {    "name": "Mark",    "Phone": "655-1276"  },  {    "name": "Annie",    "phone": "955-1276"   },  {    "name": "Joe",    "phone": "255-1276"  },  {     "name": "Tom",    "phone": "655-1276"  },  {    "name": "Lilie",    "Phone": "855-1276"  }]

4. LimitTo (Limit number)

Usage: {{number/string/array | limitto:3:1}}

Example: {{[1,2,3,4,5,6,7,8]|limitto:3:1}}}

Results: [2,3,4]

5. Lowercase (turn lowercase), uppercase (uppercase)

Usage: {{' String ' | lowercase/uppercase}}

Example: {"AAA" |uppercase}}

Result: AAA

6. Number (Digital filter)

Usage: {{numbers | number: Number of decimal places (rounding)}}

Example: {{1000|number:4}}

Results: 1,000.0000

7. Filter (filtering)

Usage: {{data | filter:{condition}}}

Example:

<ul>    <Ling-repeat= "Item in Friends|filter:{name: ' J '}">        <span>{{Item.name}}</span>        <span>{{Item.phone}}</span>    </Li></ul>

Results:

• John 555-1276
• Joe 255-1276

Description: {Name: The number of "J"} only filters the Name property, and the Filter property value contains the item J

8. Order BY (sort)

Usage: {{data | by: Condition}}

<ul>    <Ling-repeat= "Item in Friends|orderby: '-phone '">        <span>{{Item.name}}</span>        <span>{{Item.phone}}</span>    </Li></ul>

Results:

• Annie 955-1276
• Lilie 855-1276
• Mark 655-1276
• Tom 655-1276
• John 555-1276
• Joe 255-1276

Description: '-phone ' means from big to small sort ' phone ' is small to large

　　

Second, custom filter

　　

<Script>    varapp=Angular.module ("myApp",[]); //name function of the filterApp.filter ('Myfilter',function(){        //data is transmitted over the        return function(data) {returndata.touppercase (); }}) App.controller ("Myctrl",function($scope, $filter) {//Filter Name the data to filter$scope. Text=$filter ("Myfilter")("BBB"); })</Script>

angularjs--Filter