angularjs速成学习个人理解_3表达式filter过滤器的使用
2017-09-25 22:58
597 查看
上一节中说道:“表达式语法{{表达式 [|过滤器] }}”。表达式获取$scope作用域的数据模型。不过我们常常会遇到要显示在页面上的内容与模型的数据格式有些问题。
过滤器可以加入到angular.js中,为了格式化和改变数据的显示。
常用的过滤器:
filter:用于展示一个数组中的子集合。
【集合 |filter: 过滤条件1 | filter】 : 过滤条件2 多重过滤条件是或者的关系。集合可以匹配多个过滤器。
【集合|filter: fn】 这里可以很随意的定义function,fn通过fn的返回值判断是否当前数据要显示
具体代码如下:
==================================
orderBy:可以对数组进行指定条件排序。
limitTo: 可以对数组或字符进行截取。
json: 可以转化一个对象类型成为json字符串
date: 可以转化一个日期类型成特定字符串
currency:转化一个number类型为货币类型字符串
number:转化一个数字成为一个字符串
lowercase: 字符串变小写
uppercase:转化字符串变大写
过滤器可以加入到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", []); //自定义Filter myApp.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>
相关文章推荐
- angularjs速成学习个人理解_9表单验证
- angularjs速成学习个人理解_6$q服务的promise
- angularjs速成学习个人理解_5$http服务
- angularjs速成学习个人理解_4依赖注入
- angularjs速成学习个人理解_8form中的下拉框
- angularjs速成学习个人理解_7指令Directives
- Angularjs学习笔记——AngularJS中$filter过滤器使用(自定义过滤器)
- 自加自减运算符的错误使用和理解【个人学习笔记,如有错误欢迎指正】
- 学习后对正则表达式使用记录(个人)
- 用类名做方法的返回值类型 在学习Java的初始阶段,很多同学使用基本数据类型定义变量和引用类型定义变量以及使用类名做方法的返回值类型常常不知所以。今天我以自己的解读方式和个人的理解作一个简单的解释,和
- (学习笔记)简单正则表达式的使用实例[javascript]
- 学语法的一些知识点(来源书上,仅供个人学习使用)
- 【个人学习笔记5之--子查询与表表达式】
- 学习数组时的一些知识点(来源书上,仅供个人学习使用)
- [个人收藏].NET面试题 - 学习使用
- 个人总结如何学习新知识与对知识技术进行深入理解的方法
- Silverlight学习笔记一(理解一下机制,使用一下布局,实现一个简单的用户登录)
- 正则表达式学习与利器使用
- 使用Java语言理解程序逻辑指导学习1——万年历
- 使用t-sql从身份证号中提取生日(转自别人,个人学习收藏用)