angularjs-自定義過濾器示例
阿新 • • 發佈：2019-02-17
過濾器結構
{{帶過濾資料 | 過濾器名：引數1：引數2：引數3.....}}
app.filter('過濾器名', function () {
return function (待過濾資料, 引數....) {
......
return 已過濾資料;
}示例一：是否包含
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" 示例二：倒序
<!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>
<div ng-controller="myAppCtrl">
姓名:{{ name }}<br>
倒序:{{ name | reverse }}<br>
倒序並大寫:{{ name | reverse:true }}
</div>
<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>示例三：替換
<!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">
<div>
<div>
{{welcome | replaceHello}}<br/>
{{welcome | replaceHello:3:5}}<br/>
</div>
</div>
<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>示例四：篩選
<!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>
<div 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>
</div>
<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>
示例五：排序
<!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>
<div 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>
</div>
<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>
示例六：輸入過濾
<!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>
<div ng-controller="c3_5">
<div>
<input id="txtkey" type="text"
ng-model="key" placeholder="請輸入姓名關鍵字"/>
</div>
<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>
</div>
<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>
參考：
【angularjs實戰】