今天下班碰到之前的小學妹,看她今天很是煩躁,我們就溝通了一下,原來是上學的時候沒有學好AngularJS,有很多不懂的問題,她問了我一個問題,就是怎麼使用自定義過濾器? 一聽到這個問題,我就有得說了,我就給她寫了個案例,基本的使用方法。
其實自定義的過濾器很強大,功能很多,所以我們公司一直有在使用,所以我們團隊的人都應該會對它挺了解的,今天就來說說怎麼去用它。
1、首先你要很清楚地知道 該用什麼去定義一個自定義過濾器?
app.filter(name, fn):用於定義一個自定義過濾器
其中 name:過濾器名稱 fn:過濾器處理函數
2 咱們就用一個案列來分析一下
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div ng-bind="name"></div>
<div ng-bind="name | myfilter"></div>
</div>
<script>
var app = angular.module("myApp", []);
app.filter("myfilter", function() {
/*
* 過濾器中,直接return function(value) {}
* 通過閉包函數來實現數據處理,固定語法結構!
* value參數:第一個參數,用於接收要處理的數據:數據就是過濾器管道符前面變量中的數據
*/
return function(value) {/*閉包函數中的value就是過濾器接收到的數據|就是準備過濾的數據*/
/*
* 這一部分主要是用來進行數據處理的
*/
value = value.toUpperCase();
/* 過濾器中數據處理完成,一定要返回輸出*/
return value;
}
});
app.controller("myCtrl", function($scope) {
$scope.name = "jerry";
});
</script>
中間註釋部分都有解釋,應該就會一目瞭然,要記得最後一定要返回輸出
比較常見的就是運用自定義過濾器還原首字母大小寫,還有數組去重之類的,如果大家有需要,可以看看~
祝大家開心度過每一天~