ng-class用法

ng-class指令有3中操作方式

方式1: 当它的值为一个字符串时,它就会把用空格分开的字符串加到class中(不推荐,与常用class并无太大差别)

<div ng-class="{{myclass}}"></div>
....
<script>
function someController($scope){
$scope.myclass = "xxx";
}
</script>

方式2: 当值为一个数组时,它每个字符串元素都会被加到class中

<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red">


<input ng-model="style2" placeholder="Type: bold, strike or red">


<input ng-model="style3" placeholder="Type: bold, strike or red">
解释:当我们在样式中定义好bold,strike,red;类的样式后,我们输入这些字符串就会出现效果

方式3: 当值为一个对象时(key=>value),把value为true的key加到class中

<div ng-class="{true :'red', false :'green'}[someVariable]"></div>

这种用法就是说variable为true时,就给元素加上red这个class,如果variable为false就加上green这个class,这个在逻辑比较简单的时候还是蛮好用的。

下一种适合需要添加多个类的时候,也就是ng-class的值为一个对象

<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)


<input type="checkbox" ng-model="important"> important (apply "bold" class)


<input type="checkbox" ng-model="error"> error (apply "red" class)
解释:上面代码ng-class就是一个对象,我们把deleted,important,error进行双向数据绑定,当我们在checkbox勾选时,它们变为true,然后对应的key就被加到class中

<div ng-class {'selected': isSelected, 'car': isCar}">
当 isSelected = true 则增加selected class,当isCar=true,则增加car class,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,661评论 0 3
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,572评论 0 17
  • 1.背景介绍 指令是一个Dom元素上的标签(和元素上的属性, CSS类样式一样,属于这个Dom元素)它告诉Angu...
    cczhuc阅读 1,233评论 0 1
  • 情绪是由大脑中的一个神经回路所控制,包括前额皮层、杏仁核、海马、前部扣带回等。情绪是个体的愿望和需要为中介的一种心...
    海棠果121阅读 790评论 0 0