The example in this article describes the Angularjs filter filter usage. Share to everyone for your reference, specific as follows:
In development, you will often encounter such a scenario
If the user's gender is divided into "male" and "female", in the database stored in the value of 1 and 0, the user in view of their sex when the return of the value of natural is 1 or 0, the front-end to convert to "male" or "female" and then show;
If I want to change a badminton racket, a cat on a badminton racket brand as many as dozens of kinds, I would like to see the Yonex of this brand alone badminton racket;
After buying badminton racket I also want to buy a barrel of badminton, click according to the sales order display commodity;
The above three kinds of scenes to transform/filter/Sort data, in a word, the format of the data, Angularjs filter is used to do this thing.
Built-in filters
Angularjs A number of filters built into the HTML template's binding symbol {{}} to invoke the filter via |
Convert Letters to uppercase:
$scope. Name= ' Wangmeijian '
{{name | uppercase}} //Output Wangmeijian
Numbers are written in thousands of places:
$scope. num = 12345678
{{num | number}}//Output 12,345,678
Date formatting:
$scope. Date=new Date ()
{{date |: ' Yy-mm-dd '}} //Output 2015-11-19
Numbers formatted as currency:
$scope. num=987654321
{num | currency: ' ¥ '}} //Output ¥987,654,321.00
Demo Example: HTTP://RUNJS.CN/CODE/ZTGQ7FWG
A slightly more complex filter-' filter '-can return a subset of the given array, which receives a parameter that can be a string, object, function
String: Returns all elements that contain this string, and wants to return elements that do not contain this string, then add it in front!
Demo
{[' Wang ', ' Mei ', ' Jian '] | filter: ' A '}//return element containing the letter a [' Wang ', ' Jian ']
Object: Angular compares the properties of the object being filtered to that of the same name in this object, if the property value is a string that determines whether the string is included (note that this is included and 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: This function is executed on each element, and the element that returns the 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 the built-in function does not meet your business needs, you need to customize a filter, the custom filter returns a function, the function parameter is the HTML template | left side of the data, it will automatically pass into the filter
For example, the requirement is to capitalize the first letter of each word in a sentence.
<html ng-app = 'app'>
<head>
<title> Get started with AngularJS filter </ title>
<script type = "text / javascript" src = "http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"> </ script>
</ head>
<body ng-controller = 'myController'>
<p> {{str | capitalize}} </ p>
<!-Output Hello, Welcome To Bokeyuan!->
<script type = "text / javascript">
var app = angular.module ('app', [])
.controller ('myController', ['$ scope', function ($ scope) {
$ scope.str = 'hello, welcome to bokeyuan!'
}])
.filter ('capitalize', function () {
return function (str) {
var arr = str.split (/ \ s + /);
for (var i = 0; i <arr.length; i ++) {
arr [i] = arr [i] .substr (0,1) .toUpperCase () + arr [i] .slice (1);
};
return arr.join ("")
}
})
</ script>
</ body>
</ html>
Note that when the parameters of the built-in filter ' filter ' are functions, the function is executed on each element of the array, and the custom filter is the function that the array object performs its return.
More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"
I hope this article will help you to Angularjs program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
