首页
所有分类
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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
JS获取CSS样式（style/getComputedStyle/currentStyle）
Jan 19 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
卡塔尔购物网站(3) 秘鲁购物网站(1) 沙特阿拉伯购物网站(9) 新西兰购物网站(42) 奥地利购物网站(28) 菲律宾购物网站(13) 捷克购物网站(26) 波兰购物网站(52) 智利购物网站(5) 斯洛伐克购物网站(7)
You might like
PHP array操作10个小技巧分享
2011/06/23 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php导出CSV抽象类实例
2014/09/24 PHP
迪菲－赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
javascript闭包入门示例
2014/04/30 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue实现分页加载效果
2019/12/24 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
vue实现选中效果
2020/10/07 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
python中return如何写
2020/06/18 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
巴基斯坦购物网站：Goto
2019/03/11 全球购物
LACOSTE波兰官网：Polo衫、服装和鞋类
2020/09/29 全球购物
UML设计模式笔试题
2014/06/07 面试题
厂长岗位职责
2014/02/19 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
高中班主任评语
2014/12/30 职场文书
维稳工作承诺书
2015/01/20 职场文书
甲午大海战观后感
2015/06/02 职场文书