您的位置:首页 > Web前端 > CSS

angular在通过ng-class来改变样式

2016-09-29 11:55 239 查看
ng是基于数据模型的,也就是说通过数据的改变,改变视图

要写一个ng的动画效果,可能用到ng-class,早上看了一下

网上对于ng-class的应动的博客都差不多,三种方法的使用说明

根据照写的demo整理下看法,

方法一:
<p class="{{css}}">7788</p>
$scope.css="sky"

1.class换成ng-class是不可用的,

2.scope上的只能是数据和行为。官方不推荐这种方法
3.有一种写法是这样的 

<div ng-class="{sky:true}">

<p ng-class="{sky:true}">598965</p>

方法二:
<div ng-class="{true: 'sky', false: 'tomato',targe:'m-ziling-classname1'}[demo]">8899</div>
$scope.demo=true

只能在两个样式切换,不如方法三适用性强

方法三
博客中是这样写的,
<div ng-class {'selected': isSelected, 'car': isCar}"></div>
但是完全是错的 ,他们都在抄,没有自己去写,正确的写法是这样的
          ng-class='{"m-ziling-classname1":isActive,"m-ziling-classname2":!isActive}'

除了方法一,都是不允许把样式当做变量来进行绑定的,只允许给样式加以判断,ng官方可能也是这样想的吧,

ng2出来了,我还是写的ng1
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐