angularjs速成学习个人理解_3表达式filter过滤器的使用
来源:互联网 发布:禁止域名转出万网 编辑:程序博客网 时间:2024/06/04 21:21
上一节中说道:“表达式语法{{表达式 [|过滤器] }}”。表达式获取$scope作用域的数据模型。不过我们常常会遇到要显示在页面上的内容与模型的数据格式有些问题。
过滤器可以加入到angular.js中,为了格式化和改变数据的显示。
常用的过滤器:
filter:用于展示一个数组中的子集合。
【集合 |filter: 过滤条件1 | filter】 : 过滤条件2 多重过滤条件是或者的关系。集合可以匹配多个过滤器。
【集合|filter: fn】 这里可以很随意的定义function,fn通过fn的返回值判断是否当前数据要显示
$scope.fn = function(e){return e.age>13};// 过滤年龄大于13的数据// e代表当前循环时元素数据
具体代码如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body ng-app="myapp" ng-controller="myctl" ><script type="text/javascript" src="static/js/angular-1.5.8.js"></script>只要集合中包含字段过滤:<input type="text" ng-model="allfilter" placeholder="这是完全过滤" /><br />empno中包含的过滤:<input type="text" ng-model="empnofilter" placeholder="empno过滤" /><br />自定义条件过滤:<input type="number" min="11" max="35" ng-model="fnagecondition" placeholder="自定义funtion处理" /><table border="1" style="border-collapse: collapse" width="600px" > <tr> <th>No</th> <th>Empno</th> <th>Ename</th> <th>age</th> </tr> <tr ng-repeat="temp in data | filter : allfilter |filter:{empno:empnofilter}| filter:fn"> <td>{{$index + 1}}</td> <td>{{temp.empno}}</td> <td>{{temp.ename}}</td> <td>{{temp.age}}</td> </tr></table><script type="text/javascript"> var app = angular.module("myapp", []); app.controller("myctl",function($scope){ $scope.data=[{empno:'E000', ename:'Tom', age:10}, {empno:'E001', ename:'Aom1', age:11}, {empno:'E003', ename:'Bom13',age:13}, {empno:'E004', ename:'Com24',age:14}, {empno:'E005', ename:'Eom35',age:15}, {empno:'E006', ename:'Dom46',age:16}, {empno:'E007', ename:'Fom57',age:17}, {empno:'E008', ename:'Gom68',age:18}]; $scope.fnagecondition = 0; $scope.fn = function(e){return e.age>$scope.fnagecondition;}; });</script></body></html>
==================================
orderBy:可以对数组进行指定条件排序。
limitTo: 可以对数组或字符进行截取。
json: 可以转化一个对象类型成为json字符串
date: 可以转化一个日期类型成特定字符串
currency:转化一个number类型为货币类型字符串
number:转化一个数字成为一个字符串
lowercase: 字符串变小写
uppercase:转化字符串变大写
<!DOCTYPE html><html ng-app="myApp"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>Filter - AngularJS Test</title><style type="text/css">.test-div {margin:15px;padding:15px;border:1px solid #ccc;}table {table-layout:fixed;border-collapse:collapse;width:600px;}th, td {padding:5px;border:1px solid #ccc;}th {background-color:#CAD2D3;cursor:pointer;}</style></head><body><div class="test-div" ng-controller="myCtrl"><h3>点击表头排序</h3><table><tr><th ng-click="orderCol('name')">Name</th><th ng-click="orderCol('country')">Country</th></tr><tr ng-repeat="user in users | orderBy: orderProp"><td>{{user.name | uppercase}}</td><td>{{user.country | myFilter}}</td></tr></table></div><script type="text/javascript" src="static/js/angular-1.5.8.js"></script><script type="text/javascript">var myApp = angular.module("myApp", []);//自定义FiltermyApp.filter("myFilter", function() {return function(val) {return val + "@";}});myApp.controller("myCtrl", function($scope) {$scope.users = [{name:'Jani',country:'Norway'}, {name:'Carl',country:'Sweden'}, {name:'Margareth',country:'England'}, {name:'Hege',country:'Norway'}, {name:'Joe',country:'Denmark'}, {name:'Gustav',country:'Sweden'}, {name:'Birgit',country:'Denmark'}, {name:'Mary',country:'England'}, {name:'Kai',country:'Norway'}];$scope.orderCol = function(o) {$scope.orderProp = o;};});</script></body></html>
阅读全文
0 0
- angularjs速成学习个人理解_3表达式filter过滤器的使用
- angularjs速成学习个人理解_2表达式
- angularjs速成学习个人理解_6$q服务的promise
- angularjs学习 过滤器(filter)
- angularjs速成学习个人理解_1数据与模型绑定
- angularjs速成学习个人理解_4依赖注入
- angularjs速成学习个人理解_5$http服务
- angularjs速成学习个人理解_7指令Directives
- angularjs速成学习个人理解_8form中的下拉框
- angularjs速成学习个人理解_9表单验证
- angularJS中filter(过滤器)的使用
- angularjs 过滤器filter 学习笔记
- angularJs-----$filter过滤器使用 自定义过滤器
- angularJs-----$filter过滤器使用 自定义过滤器
- angularjs学习笔记之三(变量及过滤器Filter的使用)
- angularjs内置过滤器的使用学习
- angularjs过滤器的学习
- Filter过滤器的学习
- 1.NoSQL与MongoDB简介
- WebService学习笔记
- Java——多态,引用数据类型强转,组合模式
- 2.MongoDB基本操作
- java代理模式
- angularjs速成学习个人理解_3表达式filter过滤器的使用
- 菜鸟前端日记1(HTML+CSS )
- pip3~pip下载慢
- HashMap和HashTable的区别
- loadrunner Web_类函数之web_revert_auto_header()
- mysql常用基础命令以及例子
- Codeforces Round #436 (Div. 2) D. Make a Permutation!(优先队列)
- 关于java导出为war包
- LeetCode题目:23. Merge k Sorted Lists