首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS自定义过滤器用法经典实例总结

Posted in Javascript onMay 17, 2018

本文实例讲述了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="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字符串出现的位置，没有则返回-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>分数</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实战】

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

AngularJS自定义过滤器用法经典实例总结

- Author -

Mars-xq

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery的跨域调用文件
Nov 19 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
微信小程序表单验证插件WxValidate的二次封装功能（终极版）
Sep 03 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
JS 实现分页打印功能
May 16 #Javascript
使用vue-cli导入Element UI组件的方法
May 16 #Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 #Javascript
Koa2微信公众号开发之消息管理
May 16 #Javascript
js实现鼠标单击Tab表单切换效果
May 16 #Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 #Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 #Javascript
收音机(62) 立体声(1) 电台频率(32) 保养(1) 长波(3) 广播(8) 无线电(12) Harman Kardon(1) KDKA(1) 短波(8)
You might like
typecho插件编写教程（二）:写一个新插件
2015/05/28 PHP
php目录拷贝实现方法
2015/07/10 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
python中的装饰器详解
2015/04/13 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
超30万乐谱下载：Musicnotes.com
2016/09/24 全球购物
德国网上药房：Apotal
2017/04/04 全球购物
工地安全生产标语
2014/06/06 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python