Angular根据获取值不同给不同的样式
2016-01-19 10:45
661 查看
1:数据源
请注意查看上面的 “active”的值,一个是“0”,一个是“1”。现在我们根据“active”的值不同来给样式。
html:
效果:
样式颜色就你自己给了 .fa是字体图标
借此再举个例子
我们经常会遇到,在界面上展示性别,但是数据库里面存的是0或者1,那么,总要对它作个转换。
原始数据
我们可以做些改变:
这样我们就达到了目的。这个例子让我们发现,原来,在绑定表达式里面,是可以使用函数的。像我们这里的格式化函数,其实作用只存在于视图层,所以不会影响到真实数据模型。
注意:这里有两个注意点。
第一,在绑定表达式里面,只能使用自定义函数,不能使用原生函数。举个例子:
这句就是有问题的,因为Angular的插值表达式机制决定了它不能使用这样的函数,它是直接用自己的解释器去解析这个字符串的,如果确实需要调用原生函数,可以用一个自定义函数作包装,在自定义函数里面可以随意使用各种原生对象,就像这样:
第二,刚才我们这个例子只是为了说明可以这么用,但不表示这是最佳方案。Angular为这类需求提供了一种叫做filter的方案,可以在插值表达式中使用管道操作符来格式化数据
function ctrSettingtable($scope,$routeParams) {$scope.body_data = [ { "pid":"1", "fname":"jason", "lname":"kilby", "logname":"jasonktby", "company":"CAP Systems", "email":"jkiby@gapsystems.net", "not":" ", "active":"0 ", "ass":" ", "eid":" ", " check":" " }, { "pid":"2", "fname":"jason", "lname":"kilby", "logname":"jasonktby", "company":"CAP Systems", "email":"jkiby@gapsystems.net", "not":" ", "active":"1 ", "ass":" ", "eid":" ", " check":" " } ]; }
请注意查看上面的 “active”的值,一个是“0”,一个是“1”。现在我们根据“active”的值不同来给样式。
html:
<i ng-class="{1:'fa fa-check',0:' fa fa-times'}[{{x.active}}]"></i>
效果:
样式颜色就你自己给了 .fa是字体图标
借此再举个例子
我们经常会遇到,在界面上展示性别,但是数据库里面存的是0或者1,那么,总要对它作个转换。
原始数据
var tom = { name: "Tom", gender: 1 };
我们可以做些改变:
<div>{{formatGender(tom.gender)}}</div>
$scope.formatGender = function(gender) { if (gender == 0) return "女"; if (gender == 1) return "男"; } };
这样我们就达到了目的。这个例子让我们发现,原来,在绑定表达式里面,是可以使用函数的。像我们这里的格式化函数,其实作用只存在于视图层,所以不会影响到真实数据模型。
注意:这里有两个注意点。
第一,在绑定表达式里面,只能使用自定义函数,不能使用原生函数。举个例子:
<div>{{Math.abs(-1)}}</div>
这句就是有问题的,因为Angular的插值表达式机制决定了它不能使用这样的函数,它是直接用自己的解释器去解析这个字符串的,如果确实需要调用原生函数,可以用一个自定义函数作包装,在自定义函数里面可以随意使用各种原生对象,就像这样:
<div>{{abs(-1)}}</div>
$scope.abs = function(number) { return Math.abs(number); };
第二,刚才我们这个例子只是为了说明可以这么用,但不表示这是最佳方案。Angular为这类需求提供了一种叫做filter的方案,可以在插值表达式中使用管道操作符来格式化数据
相关文章推荐
- CSS cursor属性(w3school)
- 刷新页面更换CSS样式表-对网上document.write方式的修正
- CSS常用属性之段落
- CSS常用属性之文字样式
- 去掉segMentedControl的边框和改变选中字体的样式
- JS获取CSS样式(style/getComputedStyle/currentStyle)
- CSS导航下拉菜单被JS幻灯片挡住的…
- CSS3之动画
- 《css设计指南》 读书笔记 二
- 好玩的CSS点点
- CSS实现单行、多行文本溢出显示省略号(…)
- 移动平台对 META 标签的定义
- 《css设计指南》 读书笔记 一
- css-ie6下实现最小,最大宽度
- css-div下内容垂直居中
- CSS3 最小内容尺寸(min-content size)和最大内容尺寸(max-content size)简介
- CSS练习02
- W3School-CSS 分类 (Classification) 实例
- css 常用样式命名规则
- css选择器