什么是ng-class

ng-class最大的妙用就是可以根据你的逻辑表达式。来添加或移除对应的class

ng-class是angular.js里面内置的一个指令。

项目中,有时候,我们需要根据需求来切换不同的class

function bb($scope){
$scope.ss="className";
}
<div class="{{ss}}"></div>

这种方式是scope变量绑定方式,个人觉得妙用谈不上,还不如直接写class=什么的

字符串方式,比较长用

function bu($scope) {
$scope.ss= true;
} <div ng-class="{true: 'a', false: 'b'}[ss]"></div>

根据你的逻辑去切换 ss的true或者false,来显示对应的cass

对象key/valu处理

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}"></div> 

当 isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。

angular指令ng-class巧用的更多相关文章

  1. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  2. angular指令之complie和link不得不说的故事

    angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...

  3. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

  4. Angular指令渗透式理解

    通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...

  5. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  6. angular指令大全

    这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...

  7. Angular指令(一)

    Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...

  8. angular指令

    转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...

  9. angular指令的compile,prelink 和 postlink以及controller

    一. 指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在, ...

随机推荐

  1. 完美实现在同一个页面中使用不同样式的artDialog样式

    偶然发现artDialog.js这个插件,就被其优雅的设计及漂亮的效果深深吸引,在做例子时碰到了一些想当然它应该提供但却没有提供的功能,不过这都不影响我对它的喜爱,下面说一下遇到的问题吧! artDi ...

  2. 七牛整合 ueditor (拦住那头牛,七牛又如何)

    最近遇到个项目,要求所有图片都必须整合到七牛上,看了把你谈文档踩在前辈们的基础上终于把他完成了,恰巧本屌丝最近刚好有时间,本着天下屌丝是一家的原则,和小朋友们一同学习 闲话少说入正题. 第一 :下载编 ...

  3. CSS中的字体设置

    五大类:serif, sans-serif, monospace, cursive, fantasy serif 衬线字体,如 Big Caslon, 宋体 sans-serif 非衬线字体,如 He ...

  4. Spring Cloud 学习笔记(一)——入门、特征、配置

    [TOC] 0 放在前面 0.1 参考文档 http://cloud.spring.io/spring-cloud-static/Brixton.SR7/ https://springcloud.cc ...

  5. windows10 配置 华为vpn客户端

    2017-05-08 1. 安装客户端软件VPNClient_V100R001C02SPC703.exe 2. 新建vpn 安装完成后,打开客户端连接vpn,发现未启用虚拟网卡(这是因为还需要安装客户 ...

  6. hdu1421 搬寝室 DP

    转载: /*证明:从4个数中 a b c d  依次递增: 选取相邻的两个数一定是最小得 及:(a-b)^2+(c-d)^2<(a-c)^2+(b-d)^2&&(a-b)^2+( ...

  7. Linux防火墙的关闭和开启

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...

  8. JDK版本会影响项目部署

    最近在公司里面部署javaweb项目的时候,项目启动的时候报错,我使用了各种方法来寻找答案,将近花了很长的时间.就在今天我终于找到了问题的根源,我开始用的是JDK1.8的版本,换了一个1.7版本的JD ...

  9. Visual Studio 2017 针对移动开发的新特性介绍

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ Visual Studio是世界上最好的IDE之一,如果是 .NET世界,那就没有之一了(^_^),而最近推出的Visual S ...

  10. 【JAVAWEB学习笔记】24_filter实现自动登录和解决全局的编码问题

    过滤器Filter 学习目标 案例-自动登录 案例-解决全局的编码 一.过滤器Filter 1.filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...