首頁 > 開發者 > JavaScript

使用AngularJS建立自訂的過濾器的方法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用AngularJS建立自訂的過濾器的方法

 　　這篇文章主要介紹了使用AngularJS建立自訂的過濾器的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下

　　Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自訂過濾器，幸運的是，你找到了這篇博文。

　　下面顯示的是自訂過濾器長什麼樣子(請注意myfilter):

　　我們的自訂過濾器叫做 "myfilter", 它有由 ':'隔開的4個參數.

　　這是一個將會用到的樣本輸入:

　　?

1

2

3

4

5

6

$scope.friends = [{name:'John', phone:'555-1276'},

{name:'Annie', phone:'800-BIG-MARY'},

{name:'Mike', phone:'555-4321'},

{name:'Adam', phone:'555-5678'},

{name:'David', phone:'555-8765'},

{name:'Mikay', phone:'555-5678'}];

　　過濾器只顯示電話號碼中含有 "555"的項，這是樣本輸出:

　　?

1

2

3

4

5

6

Name Phone

John 555-1276

Mike 555-4321

Adam 555-5678

David 555-8765

Mikay 555-5678

　　過濾"555"的處理流程由 "windowScopedFilter"執行, 它是過濾器 'myfilter'的第四個參數.

　　下面我們來實現這些功能 (把logging添加到每個輸入參數):

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var myapp = angular.module('MyFilterApp', []);

myapp.filter('myfilter', function() {

return function(input, param1) {

console.log("------------------------------------------------- begin dump of custom parameters");

console.log("input=",input);

console.log("param1(string)=", param1);

var args = Array.prototype.slice.call(arguments);

console.log("arguments=", args.length);

if (3<=args.length) {

console.log("param2(string)=", args[2]);

}

if (4<=args.length) {

console.log("param3(bool)=", args[3]);

}

console.log("------------------------------------------------- end dump of custom parameters");

// filter

if (5<=args.length) {

return window[args[4]](input);

}

return input;

};

});

　　上面的代碼大多都log了(譯者註：將資訊顯示到控制台). 實際完成過濾的最重要的一部分是:

　　?

1

2

3

4

5

// filter

if (5<=args.length) {

return window[args[4]](input);

}

return input;

　　"return window[args[4]](input)" 調用第四個參數, 它是 'windowScopedFilter'.

　　這是控制台輸出:

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21

"input=" [object Array] custom_filter_function.html:22

"param1(string)=" "param1" custom_filter_function.html:23

"arguments=" 5 custom_filter_function.html:25

"param2(string)=" "param2" custom_filter_function.html:27

"param3(bool)=" true custom_filter_function.html:30

"------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32

"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21

"input=" [object Array] custom_filter_function.html:22

"param1(string)=" "param1" custom_filter_function.html:23

"arguments=" 5 custom_filter_function.html:25

"param2(string)=" "param2" custom_filter_function.html:27

"param3(bool)=" true custom_filter_function.html:30

"------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32

　　完整代碼:

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<html>

<head>

<script src="angular.min.js"></script>

<script type="text/javascript">

function windowScopedFilter (input) {

var output = [];

angular.forEach(input, function(v,k){

if (v.phone.contains("555")) {

output.push(v);

}

});

return output;

}

var myapp = angular.module('MyFilterApp', []);

myapp.filter('myfilter', function() {

return function(input, param1) {

console.log("------------------------------------------------- begin dump of custom parameters");

console.log("input=",input);

console.log("param1(string)=", param1);

var args = Array.prototype.slice.call(arguments);

console.log("arguments=", args.length);

if (3<=args.length) {

console.log("param2(string)=", args[2]);

}

if (4<=args.length) {

console.log("param3(bool)=", args[3]);

}

console.log("------------------------------------------------- end dump of custom parameters");

// filter

if (5<=args.length) {

return window[args[4]](input);

}

return input;

};

});

myapp.controller('MyFilterController', ['$scope', function($scope) {

$scope.friends = [{name:'John', phone:'555-1276'},

{name:'Annie', phone:'800-BIG-MARY'},

{name:'Mike', phone:'555-4321'},

{name:'Adam', phone:'555-5678'},

{name:'David', phone:'555-8765'},

{name:'Mikay', phone:'555-5678'}];

}]);

</script>

</head>

<body ng-app="MyFilterApp">

<div ng-controller="MyFilterController">

<table id="searchTextResults">

<tr><th>Name</th><th>Phone</th></tr>

<tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'">

<td>{{friend.name}}</td>

<td>{{friend.phone}}</td>

</tr>

</table>

</div>

<hr>

</body>

</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More