Angular.Js中过滤器filter与自定义过滤器filter实例详解


Posted in Javascript onMay 08, 2017

本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

一、AngularJS的filter过滤器:

  • uppercase|lowercase:大小写转换过滤
  • json:json格式过滤
  • date:日期格式过滤
  • number:数字格式过滤
  • currency:货币格式过滤
  • filter:查找
  • limitTo:字符串对象截取
  • orderBy:对象排序
<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Angular基础</title> 
</head> 
<body> 
<div ng-app="myApp"> 
 
  <!-- 向表达式添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到表达式中--> 
  <p>将字符串转换为大小写:</p> 
  <div ng-controller="uppercaseController"> 
   <p>姓名为 {{ person.lastName | uppercase }}</p> 
  </div> 
  <div ng-controller="lowercaseController"> 
   <p>姓名为 {{ person.lastName | lowercase }}</p> 
  </div> 
 
  <p>货币过滤:</p> 
  <div ng-controller="costController"> 
   数量:<input type="number" ng-model="quantity"> 
   价格:<input type="number" ng-model="price"> 
   <p>总价 = {{ (quantity * price) | currency }}</p> 
   {{250 |currency:"RMB ¥"}} 
  </div> 
 
  <!-- 向指令添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到指令中--> 
  <p>按国家的字母顺序排序对象:</p> 
  <div ng-controller="namesController"> 
   <p>循环对象:</p> 
   <ul> 
    <li ng-repeat="x in names | orderBy:'country'"> 
     {{ x.name + ', ' + x.country }} 
    </li> 
   </ul> 
   <!--json格式过滤--> 
   {{jsonText | json}}  <br/> 
   <!--date格式过滤--> 
   <span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</span><br/> 
   <!--number格式过滤--> 
   {{1.2345678 |number:1}}<br/> 
   <!--字符串截取--> 
   {{ "i love tank" | limitTo:6 }}<br/> 
   {{ "i love tank" | limitTo:-6 }}<br/> 
   <!--对象排序:降序--> 
   {{ [{"age": 20,"id": 10,"name": "iphone"}, 
   {"age": 12,"id": 11,"name": "sunm xing"}, 
   {"age": 44,"id": 12,"name": "test abc"} 
   ] | orderBy:'id':true }}<br/> 
   <!--对象排序:升序--> 
   {{ [{"age": 20,"id": 10,"name": "iphone"}, 
   {"age": 12,"id": 11,"name": "sunm xing"}, 
   {"age": 44,"id": 12,"name": "test abc"} 
   ] | orderBy:'id' }} 
  </div> 
  <p>按输入的字母显示对象:</p> 
  <div ng-controller="namesFilterController"> 
   <p>输入过滤:</p> 
   <p><input type="text" ng-model="name"></p> 
   <ul> 
    <li ng-repeat="x in names | filter:name | orderBy:'country':true"> 
     {{ (x.name | uppercase) + ', ' + x.country }} 
    </li> 
   </ul> 
   <p>name筛选:</p> 
   <ul> 
    <li ng-repeat="x in names | filter:{'name':name} | orderBy:'country':true"> 
     {{ (x.name | uppercase) + ', ' + x.country }} 
    </li> 
   </ul> 
 
   {{ [{"age": 20,"id": 10,"name": "iphone"}, 
   {"age": 12,"id": 11,"name": "sunm"}, 
   {"age": 44,"id": 12,"name": "test abc"} 
   ] | filter:{'name':'sunm'} }} 
  </div> 
 
</div> 
<script src="angular.min.js"></script> 
<script type="application/javascript"> 
 var myApp=angular.module('myApp',[]); 
 myApp.controller('uppercaseController',function($scope){ 
  $scope.person = { 
   firstName: "John", 
   lastName: "Doe" 
  }; 
 }); 
 myApp.controller('lowercaseController',function($scope){ 
  $scope.person = { 
   firstName: "John", 
   lastName: "Doe" 
  }; 
 }); 
 myApp.controller('costController',function($scope){ 
  $scope.quantity = 1; 
  $scope.price = 9.99; 
 }); 
 myApp.controller('namesController',function($scope){ 
  $scope.names = [ 
   {name:'Jani',country:'Norway'}, 
   {name:'Hege',country:'Sweden'}, 
   {name:'Kai',country:'Denmark'} 
  ]; 
  $scope.jsonText={foo:"bar",baz:23}; 
 }); 
 myApp.controller('namesFilterController',function($scope){ 
  $scope.names = [ 
   {name:'Jani',country:'Norway'}, 
   {name:'Hege',country:'Sweden'}, 
   {name:'Kai',country:'Denmark'} 
  ]; 
 }); 
 
</script> 
</body> 
</html>

Angular.Js中过滤器filter与自定义过滤器filter实例详解

二、AngularJs的控制器使用filter

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Angular基础</title> 
</head> 
<body> 
<div ng-app="myApp"> 
 <div ng-controller="firstCtrl"> 
  {{uFirstName}}<br/> 
  {{cPrice}}<br/> 
 </div> 
 
</div> 
<script src="angular.min.js"></script> 
<script type="application/javascript"> 
 var myApp=angular.module('myApp',[]); 
 myApp.controller('firstCtrl',function($scope,$filter){ 
  $scope.firstName="zhangsan"; 
  $scope.uFirstName=$filter('uppercase')($scope.firstName); 
  $scope.price="121212"; 
  $scope.cPrice=$filter('currency')($scope.price,'RMB ¥'); 
 }) 
 
</script> 
</body> 
</html>

三、AngularJs自定义filter过滤器

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Angular基础</title> 
</head> 
<body> 
<div ng-app="myApp"> 
 <div ng-controller="firstCtrl"> 
  {{welcome | replaceHello}}<br/> 
  {{welcome | replaceHello:3:5}}<br/> 
  {{welcome | rJs}}<br/> 
 </div> 
 
</div> 
<script src="angular.min.js"></script> 
<script src="filter.js"></script> 
<script type="application/javascript"> 
 var myApp=angular.module('myApp',['myApp.filter']); 
 myApp.controller('firstCtrl',function($scope){ 
  $scope.welcome="Hello AngularJs"; 
 }); 
 //自定义过滤器 
 myApp.filter('replaceHello',function(){ 
  return function(input,n1,n2){ 
   console.log(input); 
   console.log(n1); 
   console.log(n2); 
   return input.replace(/Hello/,'您好'); 
  } 
 }) 
 
</script> 
</body> 
</html>
var appFilter=angular.module('myApp.filter',[]); 
//自定义过滤器 
appFilter.filter('rJs',function(){ 
 return function(input,n1,n2){ 
  console.log(input); 
  console.log(n1); 
  console.log(n2); 
  return input.replace(/Js/,' javaScript'); 
 } 
});

Angular.Js中过滤器filter与自定义过滤器filter实例详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Bootstrap插件全集
Jul 18 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 #Javascript
详解JavaScript中return的用法
May 08 #Javascript
如何使用angularJs
May 08 #Javascript
关于foreach循环中遇到的问题小结
May 08 #Javascript
js下载文件并修改文件名
May 08 #Javascript
JS将unicode码转中文方法
May 08 #Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 #Javascript
You might like
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
分享10段PHP常用代码
2015/11/11 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
python list转dict示例分享
2014/01/28 Python
Python素数检测的方法
2015/05/11 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
软件工程专业推荐信
2013/10/28 职场文书
市场部专员岗位职责
2013/11/30 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
企业项目策划书
2014/01/11 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
优秀教师单行材料
2014/12/16 职场文书
武夷山导游词
2015/02/03 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers