AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
2014-05-13 02:07
567 查看
1.切换目录,启动项目
git checkout step-9 npm start
2.需求:
格式化要显示的数据.比如要将true-->yes,false-->no,这样相互替换.
3.效果:
4.代码实现:
这里主要是使用filter过滤器来进行数据过滤,这里只是在前端进行数据过滤,原始数据是不发生变化的.$filter:Filters are used for formatting data displayed to the user,格式化要显示的数据.
用法:
{{ expression [| filter_name[:parameter_value] ... ] }}
自定义过滤器:
angular.module('phonecatFilters', []).filter('checkmark', function() { return function(input) { return input ? 'yes' : 'no'; }; });
现在我们的过滤器已经写好了,那么将其注册到我们的项目中:
app/js/app.js:
... angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters']); ...
实际去用:
app/partials/phone-detail.html:
... <dl> <dt>Infrared</dt> <dd>{{phone.connectivity.infrared | checkmark}}</dd> <dt>GPS</dt> <dd>{{phone.connectivity.gps | checkmark}}</dd> </dl> ...
也可以使用angularjs的内置过滤器:
{{ "lower cap string" | uppercase }} {{ {foo: "bar", baz: 23} | json }} {{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
例:
<dt>Type</dt> - <dd>{{phone.battery.type}}</dd> + <dd>{{phone.battery.type | uppercase }}</dd> <dt>Talk Time</dt> <dd>{{phone.battery.talkTime}}</dd> <dt>Standby time (max)</dt>
电池这一栏变成大写的了.如下所示:
相关文章推荐
- AngularJS过滤器filter,orderBy排序,删除全部数据
- angularjs中的filter(过滤器)——格式化日期的date
- angularjs中的filter(过滤器)——格式化日期的date
- angularjs学习 过滤器(filter)
- angularjs中的filter(过滤器)——格式化日期的date
- angularJS date filter ——时间格式化过滤器
- angularjs中的filter(过滤器)——格式化日期的date
- AngularJs学习第八篇 过滤器filter创建
- angularjs中的filter(过滤器)——格式化日期的date
- 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
- angularjs学习笔记之三(变量及过滤器Filter的使用)
- angularjs中的filter(过滤器)——格式化日期的date
- AngularJS过滤器filter,orderBy排序,删除全部数据2
- HBase学习之三: hbase filter(过滤器)和coprocessor(协处理器)统计行数的简单应用
- javaWeb学习总结(10)- Filter(过滤器)学习(2)
- AngularJS取得后台Jason数据显示在页面上
- jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
- [入门]MySQL学习笔记三数据查询筛选显示
- javaweb学习总结(四十二)——Filter(过滤器)学习
- android学习记录(十八)---AppWidget显示内容随数据改变而更新