The examples in this article describe the use of ANGULARJS filters. Share to everyone for your reference, specific as follows:
In the previous sections we have contacted the ANGULARJS expression, which is the function of outputting a literal value to a view or a $scope attribute in an object. We can format the output data through the filter before the output.
The use of the filter is very simple, let's take a look at the following code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial05_1</title>
</head>
<body>
<p>{{"HELLO WORLD!"| lowercase}}</p>
<p>{{"hello world!"| uppercase}}</p>
<p>{{3.1415926| number:2}}</p>
<p>{{3011| currency}}</p>
</body>
</html>
Two nested curly braces are angularjs expressions, we call the filter by following the | character followed by the filter name. Lowercase,uppercase,number,currency is a built-in filter for ANGULARJS.
Lowercase is used to convert the letters in the text to lowercase, uppercase in contrast to the number filter used to control the format of the numbers, and currency converts the numbers to the amount format.
Let's look at the effect in the browser:
The
Angularjs provides a limited built-in filter that describes how to customize the filters below.
<!DOCTYPE html>
<html ng-app="filterMod">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial05_2</title>
</head>
<body>
<p>{{11314| toRMB}}</p>
<script>
var filterMod = angular.module("filterMod",[]);
filterMod.filter("toRMB",function($log)
{
var toRMB = function(input)
{
Var rmbnum = ['zero ', "one", "two", "three", "four", "Five", "six", "seven", "eight", "Nine", "ten", "ten", "ten", "ten thousand", "hundred million"];
var inputStr = input + "";
var inputArr = new Array();
for(i=0;i<inputStr.length;i++)
{
var temp = parseInt(input % 10);
inputArr.push(temp);
Switch (I)
{
case 0:inputArr.push(10);
Break;
case 1:inputArr.push(11);
Break;
case 2:inputArr.push(12);
Break;
case 3:inputArr.push(13);
Break;
}
input = input / 10;
}
inputArr = inputArr.reverse();
var output = "";
for(i=0;i<inputArr.length;i++)
{
output += RMBNum[inputArr[i]];
}
return output;
}
return toRMB;
};
</script>
</body>
</html>
The above is the author's custom to convert the number into renminbi capital Chinese characters filter.
Filtermod.filter ("TORMB", Function ($log) ...
The definition of the filter is similar to that of the controller, we do it through the filter method of the Angularjs module, the first parameter is the name of the filter, the second parameter is the filter implementation part, and it must return a data processing function.
var TORMB = function (input) ...
This part is a data processing function, input is the original input data, we in the function of the input data processing, and then return processing after the data can be.
Effect in Browser:
Note: This TORMB filter is only written by the author in order to demonstrate the method of custom filter, there are many deficiencies, interested readers can improve themselves.
Angularjs Source can click here to download the site .
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
