小程序即将发布_AngularJS自界说过滤器用法经典实

发布时间:2021-01-08 14:57 作者:jianzhan

摘要: AngularJS自定过虑器使用方法經典案例小结 -xq 本文关键详细介绍了AngularJS自定过虑器使用方法,融合案例方式小结剖析了AngularJS自定过虑器开展包括、更换、挑选、过虑、排列等实际

AngularJS自定义过滤器用法经典实例总结     -xq   这篇文章主要介绍了AngularJS自定义过滤器用法,结合实例形式总结分析了AngularJS自定义过滤器进行包含、替换、筛选、过滤、排序等操作相关实现技巧与注意事项,需要的朋友可以参考下

本文实例讲述了AngularJS自定义过滤器用法。分享给大家供大家参考,具体如下:

过滤器结构

{{带过滤数据 | 过滤器名:参数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"/ 
 script src="libs/angular.js/1.2.16/angular.min.js" /script 
 /head 
 body 
 div ng-controller="myAppCtrl" 
 div 
 table 
 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字符串出现的位置,没有则返回-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="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="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) {
 $e = "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: #;
 /style 
 /head 
 body 
 div ng-controller="c3_3" 
 li ng- 
 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: #;
 /style 
 /head 
 body 
 div ng-controller="c3_4" 
 li ng- 
 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: #;
 /style 
 /head 
 body 
 div ng-controller="c3_5" 
 div 
 input id="txtkey" type="text"
 ng-model="key" placeholder="请输入姓名关键字"/ 
 /div 
 li ng- 
 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相关内容感兴趣的读者可查看本站专题:《》、《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。


  • DIY T恤 个性定制网站如何

    1、我不会会赞成网站做了多 营销推广营销推广主题风格主题活动,遏制做赚营销推广方式的社会发展发展趋势化营销推广营销推广2、服务即营销推广营销推广,更强的专用型专用工具

  • 为什么要定制网站,有哪

    一个网站公账司、政府部门单位或其他公司的作用和具体实际意义并不是言而喻的。许多企业全是有本身的网站,一些是模板类网站,一些是技术专业定制网站,这二诸多类网站的作用

  • 网管理自助洗车一体机

    联接互联网管理方法方式自助式式洗车一体机 宇脉红帽沿自助式式洗车载一体机,独立自主创新高新科技高新科技简单生活起居,单独商品产品研发第五代自助式式洗车载一体机,

  • BeeconX | 为故宫旁百年珍宅

    BeeconX | 为故宫旁百年老老珍宅定制互连网部署北京市市,一座古韵与当今结合的国都。“以往街巷三千六,今日平地起高楼大厦商务大厦。”之前历史时间時间悠久的街巷和四合院已渐

  • 网站定制化开发需要哪些

    最新项目确立网站作为企业的一种对外开放对外开放宣传策划方案策划方式,每家企业全是有本身不一样的想法,也提供的并不是同的服务,因而顾客在咨询的状况下,互连网公司一般