查看: 2565|回复: 0

[JavaScript/JQuery] 爱创课堂 前端教程 angular教程 课堂笔记 插值表达式 过滤器

发表于 2018-1-3 09:27:42
Ng-show ng-hideNg-show 是否显隐元素
True 显示元素
False 隐藏元素
Ng-hide 是否显隐元素
True 表示隐藏元素
False 表示显示元素

1 <div class="main" ng-controller="myCtrl">
2 <button ng-click="togglePage(true)">商品详情</button>
3 <button ng-click="togglePage(false)">用户评论</button>
4 <div ng-show="showFirst" ng-bind="'商品详情页'"></div>
5 <!-- 由于这两个页面只能显示一个,因此我们用ng-hide与ng-show对应 -->
6 <div ng-hide="showFirst" ng-bind="'用户评论页'"></div>
7 </div>

在angular不支持Vue中单次插值语法以及过滤html插值语法
插值表达式Angular同vue一样可以对插入的数据执行js的表达式,例如:运算,方法

1 <div class="main" ng-controller="myCtrl">
2 <div> {{'面积:' + width * height}}</div>
3 <h1>{{msg.toUpperCase()}}</h1>
4 </div>

过滤器json插值时候使用的表达式不能复用,因此我们可以通过插值过滤器来帮我们实现
Json 将对象转化json字符串
Angular中过滤器语法跟vue中过滤器语法是一样的(只是传递参数时候是不同)

1 <div class="main" ng-controller="myCtrl">
2 <h1>{{obj | json}}</h1>
3 <h1>{{price | currency}}</h1>
4 </div>
filter数组过滤器filter
Vue中有个数组过滤器叫filterBy,
在angular叫filter 接收参数有三种方式
第一种 传递一个字符串,表示过滤的字段
第二种 传递一个变量,这个变量时在作用域中定义的字段
第三种 可以传递一个函数,当每一次执行过滤的时候,会执行该函数,
三个参数
第一个参数是遍历数组成员值
第二个参数是成员索引值
第三个参数是原数组
作用域是全局作用域
函数的返回值就是过滤条件
在过滤器中传递参数时,参数前面一定要加上:

1 <div class="main" ng-controller="myCtrl">
2 <h1>{{colors | filter : 'e'}}</h1>
3 <!-- 带有o字母色彩 -->
4 <h1>{{colors | filter : key}}</h1>
5 <!-- 首字母是大写的 -->
6 <h1>{{colors | filter : firstCharIsUpper}}</h1>
7 </div>

DateDate过滤器
是格式化时间的一个过滤器,这个过滤器很强大,我们看大所有页面的时间,日期格式都可以通过这个过滤表达出来(中文的星期是格式化不出来的)
参数是格式化的模版
模板中的
y表示年
M表示月
d表示日
E表示星期
h表示小时, H表示24进制的
m表示分钟
s表示秒

1 <div class="main" ng-controller="myCtrl">
2 <!-- 2016-09-07 15:53:47 -->
3 <h1>{{date | date : 'yyyy-MM-dd HH:mm:ss'}}</h1>
4 <!-- 2016-09-08 07:16:00 -->
5 <h1>{{date | date : 'yyyy-MM-dd hh:mm:ss'}}</h1>
6 </div>

UppercaseUppercase 将字符串做大写转换
LowercaseLowercase 将字符串做小写转化
limitTolimitTo 对字符串或者数组做截取操作
参数表示截取的长度 (slice(0, 参数))

1 <div class="main" ng-controller="myCtrl">
2 <!-- <h1>{{msg | uppercase}}</h1> -->
3 <!-- <h1>{{msg | lowercase}}</h1> -->
4 <!-- <h1>{{msg | limitTo : 7}}</h1> -->
5 <!-- 获取数组前三个 -->
6 <h1>{{colors | limitTo : 3}}</h1>
7 </div>
Number Number 数字过滤器
将一个数组转化一种可读性强的格式,对于整数部分,没三位加一个, 对小数做截取
参数就是小数位数的截取长度(默认保留三位小数)
截取的最后一位会做四舍五入

1 <div class="main" ng-controller="myCtrl">
2 <h1>{{num | number : 6}}</h1>
3 </div>

orderBy 数组过滤器
orderBy 排序过滤器
接收两个参数
第一个参数表示排序的字段
第二个参数表示正序还是倒序,
true倒序,
False正序(默认)
如果排序是数字,直接比较数字的大小
如果排序是字符串,根据字符所在编码进行排序
1 <div class="main" ng-controller="myCtrl">
2 <!-- <h1>{{people | orderBy : 'age' : true}}</h1> -->
3 <!-- <h1>{{people | orderBy : 'name'}}</h1> -->
4 <h1>{{people | orderBy : 'phone'}}</h1>
5 </div>



本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/




回复

使用道具 举报