没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子。 lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float型保留几位小数: {{ num | nu
资源推荐
资源详情
资源评论
Angularjs之之filter过滤器过滤器(推荐推荐)
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一
下!
ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子。
lowercase(小写)
{{ lastName | lowercase }}
uppercase(大写)
{{ lastName | uppercase }}
number(格式化数字)
number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float型保留几位小数:
{{ num | number : 2 }}
currency (货币处理)
{{num | currency : '¥'}}
json(格式化json对象)
{{ jsonTest | json}}
作用就和我们熟悉的JSON.stringify()一样
limitTo(限制数组长度或字符串长度)
{{ childrenArray | limitTo : 3 }} //将会显示数组中的前3项
filter(匹配子串)
用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数
组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。
html
<ul>
<li>filter 匹配子串(以下写法只是方便观察)</li>
<li>{{ webArr | filter : 'n' }} <!--匹配属性值中含有n的--></li>
<li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
<li>{{ webArr | filter : {name : 'l'} }} <!--//参数是对象,匹配name属性中含有l的--></li>
<li>{{ webArr | filter : fun }} <!--/参数是函数,指定返回age>25的--></li>
</ul>
js
$scope.webArr = [
{name:'nick',age:25},
{name:'ljy',age:28},
{name:'xzl',age:28},
{name:'zyh',age:30}
];
$scope.fun = function(e){return e.age>25;};
效果展示:
filter 匹配子串(以下写法只是方便观察)
[{"name":"nick","age":25}] [{"name":"nick","age":25}] [{"name":"ljy","age":28},{"name":"xzl","age":28}] [{"name":"ljy","age":28},{"name":"xzl","age":28},
{"name":"zyh","age":30}]
日期类
日期过滤器应该是常用过滤器中最简单的吧!
yyyy–表示年份;
MM–月份(必须大写);
dd–日期;
hh–时;
mm–分(必须小写);
ss–秒;
EEEE–星期;
hh:mm–形式是24小时制;
h:mma–12小时制;
其中年、月、日、时、分、秒 或 / : – 等自己试做搭配吧!
<ul>
<li>8 日期1</li>
<li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss EEEE'"></li>
<li>8 日期2</li>
<li ng-bind="date|date:'yyyy年MM月dd日 h:mma EEEE'"></li>
<li>8 日期3</li>
<li ng-bind="date|date:'yyyy年MM月dd日 hh时mm分ss秒'"></li>
<li>8 日期4</li>
<li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss'"></li>
</ul>
日期1的显示效果:
2016/11/19 11:59:05 Saturday
日期2的显示效果:
2016年11月19日 12:01PM Saturday
日期3的显示效果:
2016年11月22日 10时42分09秒
日期4的显示效果:
2016/11/22 11:16:58
orderBy排序(个人认为第七例最佳写法)排序(个人认为第七例最佳写法)
ng-repeat生成一个独立的scope作用域,直接在ng-repeat循环后加管道orderBy排序。
用法很简单,但有坑需注意两点:
参数引号勿忘;
参数形式–直接写成age,不用写成item2.age。
3 按年龄排序按年龄排序(默认升序默认升序)
<ul>
<li>3 按年龄排序(默认升序)</li>
<li ng-repeat="item2 in items2|orderBy:'age'">
<div>
<b>name</b>
<u ng-bind="item2.name"></u>
</div>
<div>
<b>age</b>
<i ng-bind="item2.age"></i>
</div>
<div>
<b>stature</b>
<i ng-bind="item2.stature"></i>
</div>
</li>
</ul>
效果展示:
剩余8页未读,继续阅读
资源评论
weixin_38713586
- 粉丝: 3
- 资源: 933
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功