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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值