This article describes the usage of AngularJS custom filters. Share it for your reference, as follows:
Filter structure
{{With filtered data | Filter name：parameter1：parameter2：parameter3.....}}
('Filter Name', function () {
return function (Data to be filtered, parameter....) {
......
return Filtered data;
}
Example 1: Whether to include
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/libs//1.2.16/"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
<div>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<!--How to write1-->
<tr ng-repeat="friend in friends |myfilter">
<!--How to write2-->
<!--<tr ng-repeat="friend in newArr=(friends | myfilter)">-->
<td>{{}}</td>
<td>{{}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var app = ("myApp", []);
("myAppCtrl", ["$scope", function ($scope) {
$ = [{name: 'John', phone: '44555-1276'},
{name: 'Annie', phone: '800-BIG-MARY'},
{name: 'Mike', phone: '11555-4321'},
{name: 'Adam', phone: '33555-5678'},
{name: 'David', phone: '387555-8765'},
{name: 'Mikay', phone: '555-5678'}];
}]);
("myfilter", function () {
return function (input) {
var output = [];
(input, function (value, key) {
("value==" + (value));
("type==" + typeof ());
("==" + ("555"));
/*js does not have a contain method, use indexOf to determine whether the string contains */
/* where the indexOf string appears, if there is no, return -1*/
//Method 1: if (("555") >= 0) {
(value);
}
//Method 2:// if (("555") !== -1) {
// (value);
// }
});
return output;
}
});
</script>
</body>
</html>
Example 2: Inverse order
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/libs//1.2.16/"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
Name:{{ name }}<br>
Inverse order:{{ name | reverse }}<br>
Inverse order并大写:{{ name | reverse:true }}
</div>
<script type="text/javascript">
var myAppModule = ("myApp", []);
("myAppCtrl", ["$scope", function ($scope) {
$ = "xuqiang";
}]);
("reverse", function () {
return function (input, uppercase) {
<!--inputIt's one of themnameValues represented。-->
<!--uppercasethisboolvalue，Determine whether to convert case。-->
var out = "";
for (var i = 0; i < ; i++) {
out = (i) + out;
}
if (uppercase) {
out = ();
}
return out;
<!--Returns the filtered string-->
}
});
</script>
</body>
</html>
Example 3: Replacement
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/libs//1.2.16/"></script>
</head>
<body ng-controller="myAppCtrl">
<div>
<div>
{{welcome | replaceHello}}<br/>
{{welcome | replaceHello:3:5}}<br/>
</div>
</div>
<script type="text/javascript">
var app = ("myApp", []);
("myAppCtrl", ["$scope", function ($scope) {
$ = "Hello AngularJs";
}]);
//Custom filter ('replaceHello', function () {
return function (input, n1, n2) {
("input==" + input);
("n1==" + n1);
("n2==" + n2);
return (/Hello/, 'Hello');
}
});
</script>
</body>
</html>
Example 4: Filter
<!doctype html>
<html ng-app="a3_3">
<head>
<title>Custom filters</title>
<script src="../Script/"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .odd {
color: #0026ff;
}
ul .even {
color: #ff0000;
}
ul .bold {
font-weight: bold;
}
ul li span {
width: 52px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<div ng-controller="c3_3">
<ul>
<li ng-class="{{bold}}">
<span>Serial number</span>
<span>Name</span>
<span>gender</span>
<span>age</span>
<span>Fraction</span>
</li>
<li ng-repeat=" stu in data | young:0"
ng-class-odd="'odd'"
ng-class-even="'even'">
<span>{{$index+1}}</span>
<span>{{}}</span>
<span>{{}}</span>
<span>{{}}</span>
<span>{{}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
var a3_3 = ('a3_3', []);
a3_3.controller('c3_3', ['$scope', function ($scope) {
$ = "bold";
$ = [
{name: "Zhang Mingming", sex: "female", age: 24, score: 95},
{name: "Li Qingsi", sex: "female", age: 27, score: 87},
{name: "Liu Xiaohua", sex: "male", age: 28, score: 86},
{name: "Chen Zhongzhong", sex: "male", age: 23, score: 97}
];
}]);
a3_3.filter('young', function () {
return function (e, type) {
var _out = [];
var _sex = type ? "male" : "female";
for (var i = 0; i < ; i++) {
if (e[i].age > 22 && e[i].age < 28 &&
e[i].sex == _sex)
_out.push(e[i]);
}
return _out;
}
});
</script>
</body>
</html>
Example 5: Sort
<!doctype html>
<html ng-app="a3_4">
<head>
<title>Header sort</title>
<script src="../Script/"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .bold {
font-weight: bold;
cursor: pointer;
}
ul li span {
width: 52px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<div ng-controller="c3_4">
<ul>
<li ng-class="{{bold}}">
<span>Serial number</span>
<span ng-click="title='name';desc=!desc">
Name
</span>
<span ng-click="title='sex';desc=!desc">
gender
</span>
<span ng-click="title='age';desc=!desc">
age
</span>
<span ng-click="title='score';desc=!desc">
Fraction
</span>
</li>
<li ng-repeat=" stu in data | orderBy : title : desc">
<!--title：Attribute value，desc：Ascending orderordescending order-->
<span>{{$index+1}}</span>
<span>{{}}</span>
<span>{{}}</span>
<span>{{}}</span>
<span>{{}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
var a3_4 = ('a3_4', []);
a3_4.controller('c3_4', ['$scope', function ($scope) {
$ = "bold";
$ = 'name';
$ = 0;
$ = [
{name: "Zhang Mingming", sex: "female", age: 24, score: 95},
{name: "Li Qingsi", sex: "female", age: 27, score: 87},
{name: "Liu Xiaohua", sex: "male", age: 28, score: 86},
{name: "Chen Zhongzhong", sex: "male", age: 23, score: 97}
];
}])
</script>
</body>
</html>
Example 6: Input Filtering
<!doctype html>
<html ng-app="a3_5">
<head>
<title>Character search</title>
<script src="../Script/"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .bold {
font-weight: bold;
cursor: pointer;
}
ul li span {
width: 52px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<div ng-controller="c3_5">
<div>
<input type="text"
ng-model="key" placeholder="Please enter the name keyword"/>
</div>
<ul>
<li ng-class="{{bold}}">
<span>Serial number</span>
<span>Name</span>
<span>gender</span>
<span>age</span>
<span>Fraction</span>
</li>
<li ng-repeat=" stu in data | filter : {name:key}">
<span>{{$index+1}}</span>
<span>{{}}</span>
<span>{{}}</span>
<span>{{}}</span>
<span>{{}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
var a3_5 = ('a3_5', []);
a3_5.controller('c3_5', ['$scope', function ($scope) {
$ = "bold";
$ = '';
$ = [
{name: "Zhang Mingming", sex: "female", age: 24, score: 95},
{name: "Li Qingsi", sex: "female", age: 27, score: 87},
{name: "Liu Xiaohua", sex: "male", age: 28, score: 86},
{name: "Chen Zhongzhong", sex: "male", age: 23, score: 97}
];
}])
</script>
</body>
</html>
refer to:
【angularjs actual combat】
For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》
I hope this article will be helpful to everyone's AngularJS programming.