AngularJS中过滤器的使用与自定义实例代码


Posted in Javascript onSeptember 17, 2016

前言

相信大家都知道过滤器的使用:一种是在html中的使用,一种是在js代码中的使用,下面我们来通过实例深入了解。

实例代码

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>过滤器</title> 
    <script src="day2/src/angular.js"></script> 
    <style type="text/css"> 
    </style> 
  </head> 
  <body> 
     
    <div ng-app="fristApp"> 
      <div ng-controller="fristController"> 
         
        <!--多个过滤器之间用 | 链接--> 
         
        <!--参数的实质就是把参数添加在数字前面(在货币符号处使用)--> 
        {{money | currency}}<br /> 
        {{money | currency:'¥'}}<br /> 
         
        {{str | uppercase}}<br /> 
        {{json | json}}<br /> 
         
        <!-- 会进行四舍五入--> 
        {{num | number:3}}<br /> 
         
        <!--时间 只有MM是大写--> 
        {{currenttime | date:'yyyy-MM-dd-hh'}} 
         
        <!--字符串的切割--> 
        {{strr | limitTo:3}} 
        {{strr | limitTo:-3}} 
         
        <!--按照person的age进行排序--> 
        <ul> 
          <li ng-repeat="person in arr | orderBy:'age':false"> 
            {{person.name}} 
          </li> 
        </ul> 
         
        <!--true 位于第二个位置,其中num是不能加“”的,上面的加“”是因为name是他的一个属性--> 
        <ul> 
          <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"> 
            {{n}} 
          </li> 
        </ul> 
         
         
        <!--根据person的属性进行过滤--> 
        <input type="text" ng-model="name" /> 
        <ul> 
          <li ng-repeat="person in arr | filter:{'name':name}"> 
            {{person.name}} 
          </li> 
        </ul> 
         
         
      </div> 
       
    </div> 
  </body> 
  <script type="text/javascript"> 
    var myApp = angular.module('fristApp',[]); 
    myApp.controller('fristController',function($scope,$filter){ 
      $scope.money = 100; 
      $scope.str = "fsHIOiiiiIU" ; 
      $scope.json = {name:"zhangsan",age:40}; 
      $scope.num = 12432432432; 
      var time = new Date(); 
      $scope.currenttime = time.getTime(); 
       
      $scope.strr = "fujichao"; 
       
      $scope.arr = [ 
        {name:'zhangsan',age:33}, 
        {name:'zhangsan2',age:30}, 
        {name:'zhangsan3',age:44}, 
        {name:'zhangsan4',age:3} 
      ]; 
       
       
      // 如果数组的元素相等的话,这两个元素的内存地址是相同的。 
      var arrnum = [12,12,33,44]; 
      if(arrnum[0]===arrnum[1]){ 
        console.log("fji") 
      }; 
       
      /* 在JS中使用过滤器*/ 
       
      // $filter(过滤器的名字)(对象,条件) 
      var val = $filter('currency')($scope.money,'¥'); 
      console.log(val); 
       
      var string1 = "fssdHIUHIjiojjOIJIOJ" 
      var valStr = $filter('uppercase')(string1); 
      console.log(valStr) 
    }) 
  </script> 
</html>

运行效果图如下

AngularJS中过滤器的使用与自定义实例代码

总结

以上就是这篇文章的全部内容,希望对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JQuery 学习技巧总结
May 21 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
利用js编写响应式侧边栏
Sep 17 #Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 #Javascript
JavaScript编写一个简易购物车功能
Sep 17 #Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 #Javascript
Bootstrap响应式侧边栏改进版
Sep 17 #Javascript
H5用户注册表单页 注册模态框!
Sep 17 #Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 #Javascript
You might like
PHP6 mysql连接方式说明
2009/02/09 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
js 内存释放问题
2010/04/25 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python操作Excel之xlsx文件
2017/03/24 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python和Sublime整合过程图示
2019/12/25 Python
python Tornado框架的使用示例
2020/10/19 Python
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
英文版餐饮业求职信
2013/10/18 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
给校长的建议书300字
2014/05/16 职场文书
搞笑车尾标语
2014/06/23 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android