This time I will show you how to use AngularJS custom filter usage, and what are the precautions for using AngularJS custom filter usage. The following is a practical case, let's take a look.
Filter structure
{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}
app.filter('过滤器名', function () {
return function (待过滤数据, 参数....) {
......
return 已过滤数据;
}Copy after login
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="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<p ng-controller="myAppCtrl">
<p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<!--写法1-->
<tr ng-repeat="friend in friends |myfilter">
<!--写法2-->
<!--<tr ng-repeat="friend in newArr=(friends | myfilter)">-->
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</p>
</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.friends = [{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'}];
}]);
app.filter("myfilter", function () {
return function (input) {
var output = [];
angular.forEach(input, function (value, key) {
console.log("value==" + JSON.stringify(value));
console.log("value.phone类型==" + typeof (value.phone));
console.log("value.phone.indexOf==" + value.phone.indexOf("555"));
/*js中没有contains方法，使用indexOf来判断字符串是否包含*/
/*indexOf字符串出现的位置，没有则返回-1*/
//方法一：
if (value.phone.indexOf("555") >= 0) {
output.push(value);
}
//方法二：
// if (value.phone.indexOf("555") !== -1) {
// output.push(value);
// }
});
return output;
}
});
</script>
</body>
</html>Copy after login
Example 2: Reverse order
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<p ng-controller="myAppCtrl">
姓名:{{ name }}<br>
倒序:{{ name | reverse }}<br>
倒序并大写:{{ name | reverse:true }}
</p>
<script type="text/javascript">
var myAppModule = angular.module("myApp", []);
myAppModule.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.name = "xuqiang";
}]);
myAppModule.filter("reverse", function () {
return function (input, uppercase) {
<!--input就是其中name代表的值。-->
<!--uppercase这个bool值，判断是否要进行大小写转换。-->
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
<!--返回过滤后的字符串-->
}
});
</script>
</body>
</html>Copy after login
Example 3: Replace
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-controller="myAppCtrl">
<p>
<p>
{{welcome | replaceHello}}<br/>
{{welcome | replaceHello:3:5}}<br/>
</p>
</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.welcome = "Hello AngularJs";
}]);
//自定义过滤器
app.filter('replaceHello', function () {
return function (input, n1, n2) {
console.log("input==" + input);
console.log("n1==" + n1);
console.log("n2==" + n2);
return input.replace(/Hello/, '您好');
}
});
</script>
</body>
</html>Copy after login
Example 4: Filter
<!doctype html>
<html ng-app="a3_3">
<head>
<title>自定义过滤器</title>
<script src="../Script/angular.min.js"
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>
<p ng-controller="c3_3">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat=" stu in data | young:0"
ng-class-odd="'odd'"
ng-class-even="'even'">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</p>
<script type="text/javascript">
var a3_3 = angular.module('a3_3', []);
a3_3.controller('c3_3', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.data = [
{name: "张明明", sex: "女", age: 24, score: 95},
{name: "李清思", sex: "女", age: 27, score: 87},
{name: "刘小华", sex: "男", age: 28, score: 86},
{name: "陈忠忠", sex: "男", age: 23, score: 97}
];
}]);
a3_3.filter('young', function () {
return function (e, type) {
var _out = [];
var _sex = type ? "男" : "女";
for (var i = 0; i < e.length; i++) {
if (e[i].age > 22 && e[i].age < 28 &&
e[i].sex == _sex)
_out.push(e[i]);
}
return _out;
}
});
</script>
</body>
</html>Copy after login
Example 5: Sort
<!doctype html>
<html ng-app="a3_4">
<head>
<title>表头排序</title>
<script src="../Script/angular.min.js"
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>
<p ng-controller="c3_4">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span ng-click="title='name';desc=!desc">
姓名
</span>
<span ng-click="title='sex';desc=!desc">
性别
</span>
<span ng-click="title='age';desc=!desc">
年龄
</span>
<span ng-click="title='score';desc=!desc">
分数
</span>
</li>
<li ng-repeat=" stu in data | orderBy : title : desc">
<!--title：属性值，desc：升序or降序-->
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</p>
<script type="text/javascript">
var a3_4 = angular.module('a3_4', []);
a3_4.controller('c3_4', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.title = 'name';
$scope.desc = 0;
$scope.data = [
{name: "张明明", sex: "女", age: 24, score: 95},
{name: "李清思", sex: "女", age: 27, score: 87},
{name: "刘小华", sex: "男", age: 28, score: 86},
{name: "陈忠忠", sex: "男", age: 23, score: 97}
];
}])
</script>
</body>
</html>Copy after login
Example 6: Input filtering
<!doctype html>
<html ng-app="a3_5">
<head>
<title>字符查找</title>
<script src="../Script/angular.min.js"
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>
<p ng-controller="c3_5">
<p>
<input id="txtkey" type="text"
ng-model="key" placeholder="请输入姓名关键字"/>
</p>
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat=" stu in data | filter : {name:key}">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</p>
<script type="text/javascript">
var a3_5 = angular.module('a3_5', []);
a3_5.controller('c3_5', ['$scope', function ($scope) {
$scope.bold = "bold";
$scope.key = '';
$scope.data = [
{name: "张明明", sex: "女", age: 24, score: 95},
{name: "李清思", sex: "女", age: 27, score: 87},
{name: "刘小华", sex: "男", age: 28, score: 86},
{name: "陈忠忠", sex: "男", age: 23, score: 97}
];
}])
</script>
</body>
</html>Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to use string templates in Vue
How to deal with Mac installation thrift error due to bison
The above is the detailed content of How to use AngularJS custom filter usage. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
