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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
Javascript变量函数浅析
Sep 02 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
JS 表单验证大全
2011/11/23 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
详解python itertools功能
2020/02/07 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
如何利用find命令查找文件
2015/02/07 面试题
如何开发一个JQuery插件
2016/07/28 面试题
2015年民主生活会发言材料
2014/12/15 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
入队仪式主持词
2015/07/04 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
学生检讨书范文
2019/06/24 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
图文详解matlab原始处理图像几何变换
2021/07/09 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle