angularjs-$filter及callee,$watch

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了angularjs-$filter及callee,$watch，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
  1. #angularjs常用过滤器
  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5. <Metacharset="utf-8"/>
  6. <title></title>
  7. <scriptsrc="js/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <divng-app="app"ng-controller="ctrl">
  11. 货币currency：{{999.99|currency:'$':1}}<br/>
  12. 数字number：{{999.111|number:2}}<br/>
  13. 大写lowercase：{{"CXIONG"|lowercase}}<br/>
  14. 小写uppercase：{{"cxiong"|uppercase}}<br/>
  15. 截取字符limitTo：{{"cxiong"|limitTo:2:1}}<br/>
  16. 日期data：{{time|date:'yyyy年MM月dd日HH时mm分ss秒'}}<br/>
  17. 排序orderBy：{{data|orderBy}}<br/>
  18. <!--filter精确匹配-->
  19. 过滤filter：{{data|filter:1:true}}<br/>
  20. </div>
  21.  
  22. <scripttype="text/javascript">
  23. varm=angular.module('app',[]);
  24. m.controller('ctrl',['$scope',function($scope){
  25. $scope.time=newDate().getTime()
  26. $scope.data=[1,3,4,55,66,23,14,41]
  27. }]);
  28.  
  29. </script>
  30. </body>
  31. </html>
  1. #$filter和callee应用表格排序
  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5. <Metacharset="UTF-8">
  6. <title></title>
  7. <scripttype="text/javascript"src='js/angular.min.js'></script>
  8. <styletype="text/css">
  9. .ng-cloak{display:none;}
  10. </style>
  11. </head>
  12. <bodyng-app="hd"ng-cloakclass="ng-cloak">
  13. <divng-controller="ctrl">
  14. <tableborder=""cellspacing=""cellpadding="">
  15. <tr>
  16. <thng-click="sort('name')">名称</th>
  17. <thng-click="sort('num')">数量</th>
  18. <thng-click="sort('price')">价格</th>
  19. </tr>
  20. <trng-repeat="dindata">
  21. <td>{{d.name}}</td>
  22. <td>{{d.num}}</td>
  23. <td>{{d.price}}</td>
  24. </tr>
  25. </table>
  26. </div>
  27.  
  28. <scripttype="text/javascript">
  29. varm=angular.module('hd',[])
  30. m.controller('ctrl','$filter',function($scope,$filter){
  31. $scope.data=[
  32. {'name':'iphone6','num':150,'price':3999},{'name':'beats','num':100,'price':999},{'name':'iphone7','num':500,'price':5999},{'name':'ipad','num':250,'price':1999}
  33. ]
  34. varstatus=true
  35. $scope.sort=function(field){
  36. //arguments.callee全局存放静态变量
  37. if(arguments.callee[field]=='undefine'){
  38. arguments.callee[field]=true
  39. }
  40. arguments.callee[field]=!arguments.callee[field]
  41. $scope.data=$filter('orderBy')($scope.data,field,arguments.callee[field])
  42. }
  43.  
  44. }])
  45. </script>
  46. </body>
  47. </html>
  1. #全局变量保存状态
  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5. <Metacharset="UTF-8">
  6. <title></title>
  7. <scripttype="text/javascript"src='js/angular.min.js'></script>
  8. <styletype="text/css">
  9. .ng-cloak{display:none;}
  10. </style>
  11. </head>
  12. <bodyng-app="hd"ng-cloakclass="ng-cloak">
  13. <divng-controller="ctrl">
  14. <tableborder="1"cellspacing=""cellpadding="">
  15. <tr>
  16. <thng-click="sort('name')">名称</th>
  17. <thng-click="sort('num')">数量{{status}}
  18. <spanng-if="status">升序</span>
  19. <spanng-if="!status">降序</span>
  20. </th>
  21. <thng-click="sort('price')">价格</th>
  22. </tr>
  23. <trng-repeat="dindata">
  24. <td>{{d.name}}</td>
  25. <td>{{d.num}}</td>
  26. <td>{{d.price}}</td>
  27. </tr>
  28. </table>
  29. </div>
  30.  
  31. <scripttype="text/javascript">
  32. varm=angular.module('hd','price':1999}
  33. ]
  34. $scope.status=false
  35. $scope.sort=function(field){
  36. //arguments.callee全局存放静态变量
  37. //if(arguments.callee[field]=='undefine'){
  38. //arguments.callee[field]=true
  39. //}
  40. //arguments.callee[field]=!arguments.callee[field]
  41. //$scope.data=$filter('orderBy')($scope.data,arguments.callee[field])
  42. $scope.status=!$scope.status
  43. $scope.data=$filter('orderBy')($scope.data,$scope.status)
  44. }
  45.  
  46. }])
  47. </script>
  48. </body>
  49. </html>
  1. #$watch监控某个变量
  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5. <Metacharset="utf-8"/>
  6. <title></title>
  7. <scriptsrc="js/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <divng-app="app"ng-controller="ctrl">
  11. $watch:<inputtype="text"ng-model="title"/>{{err}}
  12. </div>
  13.  
  14. <scripttype="text/javascript">
  15. varm=angular.module('app',function($scope){
  16. $scope.title=''
  17. //n为当前输入字符，o为上一次字符
  18. $scope.$watch('title',function(n,o){
  19. $scope.err=n.length>0?'':'不能为空';
  20. })
  21. }]);
  22.  
  23. </script>
  24. </body>
  25. </html>
  1. #$watch监控某个对象
  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5. <Metacharset="UTF-8">
  6. <title></title>
  7. <scripttype="text/javascript"src='js/angular.min.js'></script>
  8. <styletype="text/css">
  9. .ng-cloak{display:none;}
  10. </style>
  11. </head>
  12. <bodyng-app="hd"ng-cloakclass="ng-cloak">
  13. <divng-controller="ctrl">
  14. 请输入姓名：<inputtype="text"ng-model="odata.name"/>{{err}}
  15. </div>
  16.  
  17. <scripttype="text/javascript">
  18. varm=angular.module('hd',$filter){
  19.  
  20. $scope.odata={'name':'cxiong','age':29};
  21. $scope.$watch('odata.name',o){
  22. $scope.err=n.length?'':'不能为空';
  23. });
  24. }])
  25. </script>
  26. </body>
  27. </html>
  1. #$watch和$filter实现排序和搜索框功能，自定义加*过滤器
  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5. <Metacharset="UTF-8">
  6. <title></title>
  7. <scripttype="text/javascript"src='js/angular.min.js'></script>
  8. <styletype="text/css">
  9. .ng-cloak{display:none;}
  10. </style>
  11. </head>
  12. <bodyng-app="hd"ng-cloakclass="ng-cloak">
  13. <divng-controller="ctrl">
  14. 搜索框：<inputtype="text"ng-model="search"/>
  15. <tableborder="1"cellspacing=""cellpadding="">
  16. <tr>
  17. <thng-click="sort('name')">名称</th>
  18. <thng-click="sort('num')">数量
  19. <spanng-if="status">升序</span>
  20. <spanng-if="!status">降序</span>
  21. </th>
  22. <thng-click="sort('price')">价格</th>
  23. </tr>
  24. <trng-repeat="dintmp">
  25. <td>{{d.name}}</td>
  26. <td>{{d.num}}</td>
  27. <td>{{d.price|truncate}}</td>
  28. </tr>
  29. </table>
  30. </div>
  31.  
  32. <scripttype="text/javascript">
  33. varm=angular.module('hd',[]);
  34. //自定义加*过滤器
  35. m.filter('truncate',function(){
  36. returnfunction(price){
  37. returnString(parseInt(price/100))+'**元'
  38. }
  39. })
  40.  
  41. m.controller('ctrl','price':1999}
  42. ]
  43.  
  44. //排序功能
  45. $scope.status=false
  46. $scope.sort=function(field){
  47. //arguments.callee全局存放静态变量
  48. //if(arguments.callee[field]=='undefine'){
  49. //arguments.callee[field]=true
  50. //}
  51. //arguments.callee[field]=!arguments.callee[field]
  52. //$scope.data=$filter('orderBy')($scope.data,arguments.callee[field])
  53. $scope.status=!$scope.status
  54.  
  55. $scope.tmp=$filter('orderBy')($scope.data,$scope.status)
  56. }
  57.  
  58. //搜索框功能
  59. //过滤后数据。用于显示
  60. $scope.tmp=$scope.data
  61. $scope.$watch('search',o){
  62. $scope.tmp=$filter('filter')($scope.data,n)
  63. })
  64. }])
  65. </script>
  66. </body>
  67. </html>

猜你在找的Angularjs相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作