首页
所有分类
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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）
Dec 10 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
js实现百度搜索提示框
Feb 05 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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
tensorflow(2) 字符串(2) Spring(9) Xception(1) Inception(2) Seaborn(1) 内存泄露(1) PostMapping(1) yolo3(1) ResNet50(1)
You might like
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python的面向对象思想分析
2015/01/14 Python
python比较2个xml内容的方法
2015/05/11 Python
Python注释详解
2016/06/01 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
详解Django之auth模块（用户认证）
2018/04/17 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
浅析Python中字符串的intern机制
2020/10/03 Python
香港迪士尼乐园酒店预订：Hong Kong Disneyland Hotels
2017/05/02 全球购物
集团薪酬管理制度
2014/01/13 职场文书
职工运动会邀请函
2014/01/19 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
努力学习演讲稿
2014/05/10 职场文书
商场父亲节活动方案
2014/08/27 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫