AngularJS自定義過濾器用法經典實例總結
本文實例講述了AngularJS自定義過濾器用法。分享給大家供大家參考,具體如下:
過濾器結構
{{帶過濾數(shù)據(jù) | 過濾器名:參數(shù)1:參數(shù)2:參數(shù)3.....}} app.filter('過濾器名', function () { return function (待過濾數(shù)據(jù), 參數(shù)....) { ...... return 已過濾數(shù)據(jù); }
示例一:是否包含
<!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"> <div> <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> </div> </div> <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字符串出現(xiàn)的位置,沒有則返回-1*/ //方法一: if (value.phone.indexOf("555") >= 0) { output.push(value); } //方法二: // if (value.phone.indexOf("555") !== -1) { // output.push(value); // } }); return output; } }); </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> <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>分數(shù)</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"> 分數(shù) </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>分數(shù)</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相關內容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
- 詳解AngularJS中自定義過濾器
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例
- AngularJS 自定義過濾器詳解及實例代碼
- Angularjs 依賴壓縮及自定義過濾器寫法
- angularJs自定義過濾器實現(xiàn)手機號信息隱藏的方法
- AngularJS實現(xiàn)的自定義過濾器簡單示例
- 簡述angular自定義過濾器在頁面和控制器中的使用
- Angular.Js中過濾器filter與自定義過濾器filter實例詳解
- 詳解Angular的內置過濾器和自定義過濾器【推薦】
- angularjs自定義過濾器demo示例
相關文章
利用JavaScript的AngularJS庫制作電子名片的方法
這篇文章主要介紹了利用JavaScript的AngularJS庫制作電子名片的方法,其中需要使用到HTML5的canvas畫布,需要的朋友可以參考下2015-06-06AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法
這篇文章主要介紹了AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法,對比不同瀏覽器錯誤提示分析了加載失敗的原因及通過http訪問的解決方法,需要的朋友可以參考下2017-01-01angularJs復選框checkbox選中進行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復選框checkbox選中進行ng-show顯示隱藏的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10詳解angularjs結合pagination插件實現(xiàn)分頁功能
本篇文章主要介紹了詳解angularjs結合pagination插件實現(xiàn)分頁功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02AngularJS實踐之使用NgModelController進行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復雜的一個部分,但是這也是其比較好玩的地方。這篇文章我們就來說一說如何在我們自定義的指令中,利用ngModel的controller來做雙向數(shù)據(jù)綁定,本文對大家學習AngularJS具有一定的參考借鑒價值,有需要的朋友們可以參考借鑒。2016-10-10