ng-class的使用几种方式

(1):利用双向数据绑定(className根据chang2的值去匹配类)

<div class="{{className}}">............</div>

$scope.className="change2";

(2):通过字符串数组的形式

<div ng-class="{true:'RED',false:'GREEN'}[className]"></div>

$scope.className=true/false;

当className=true的时候,ng-class=RED,  or GREEN

(3):通过键值对的形式

<div ng-class="{'A':select1,'B':select2,'C':select3}"></div>

$scope.select3=true;此时的ng-class=C;

ng-style的使用几种方式

1)表达式

ng-style="{'font-size':languageType =='en-us'?'12px':'23px'}"
2)绑定对象
 //开户类型下拉框样式
$scope.selectDefaultStyle = {
"color": "#38270B!important",
"border": "1px solid #e0e0e0",
"background": "rgba(224,224,224,.1)",
"border-radius": "2px",
"outline": "none",
"height": "30px",
"font-size": "14px",
"padding-left": "5px",
"width": "120px",
"margin-right": "10px", };
<select id="type" ng-model="baseInfo.open_type" ng-options="item.id as item.name for item in openTypeArr" ng-show="isBaseInfoEdit"
  ng-style="selectDefaultStyle">
</select>

关于ng-class,ng-style的用法的更多相关文章

  1. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  2. Flume NG Getting Started(Flume NG 新手入门指南)

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  3. Ng Alain使用 - cli和克隆两种方式

    感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...

  4. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  5. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

  6. How to Pronounce the Letters NG – No Hard G

    How to Pronounce the Letters NG – No Hard G Share Tweet Share Most of the time when you see the lett ...

  7. [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案

    2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...

  8. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  9. Angular CLI 启动 版本ng 4

    npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200

  10. style、currentStyle、getComputeStylel的使用

    (1)js中使用obj.style的用法,是为了获得内联样式,即style属性中的值. 如果想获取obj.style.display,但内联样式表中没有定义display,那么将返回一个空的字符串. ...

随机推荐

  1. cookie和localstorage sessionStorage的概念、区别、使用场景

    本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...

  2. java的简单入门,tomcat服务器

    Tomcat是一款开源的处理动态非常牛逼的web服务器.是sun公司开发的,在丧尸危机之后被收购了. 安装Tomcat需要的支持安装包 JDK下载:http://www.oracle.com/tech ...

  3. Runtime获取类的属性列表和方法列表

    Runtime获取类的属性列表和方法列表 Runtime很强大,他使得OC中没有真正意义上的私有属性和私有方法,我们可以利用OC的运行时拿到一个类的任何方法和任何属性,然后动态的去调用方法,objc_ ...

  4. resizable可调整尺寸组件

    Resizable 可调整尺寸不依赖于其他组件 1.用法:通过标记创建可调整尺寸(resizable)对象 <div class="easyui-resizable" sty ...

  5. Linux系统下超级用户密码的修改

    1)重启系统:在虚拟机刚启动界面,不停地按上下键,停止系统的自动引导(界面底部有提示) 2) 按 e 进入编辑模式 3) 编辑内容如下:完成后按Ctrl+x    (具体编辑内容为下图:删除倒数第三行 ...

  6. 如何规划和选择数据库服务器:CPU、内存、磁盘、网络(转)

    转自:http://blog.chinaunix.net/uid-5715-id-2734517.html 学习如何根据业务模型来计算tpcc值,挺有帮助的. 当一个新的业务系统开发完成后,需要在一个 ...

  7. Slice header 中的frame_num的含义?

    Frame_num表示解码的顺序.该图像是参考帧的时候,Frame_num才有意义.非参考帧的frame_num在poc type为2或3时,用于poc值的计算. H264中frame_num定义如下 ...

  8. React之组件

    鉴于个人的开发习惯,我将react默认的文件结构作了如下修改: 我们的项目是写在src目录下的. 那么,接下来,继续看react的组件式如何编写的吧. 一.react的组件 不同于vue的每个组件都是 ...

  9. [置顶] 滴滴插件化框架VirtualAPK原理解析(一)之插件Activity管理

    上周末,滴滴与360都开源了各自的插件化框架,VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者,在周末就迫不及待的下载了Virtualapk框架来进行研究,本篇博客带来的是Vir ...

  10. awk结合正则匹配

    利用awk分析data.csv中label列各取值的分布. 在终端执行head data.csv查看数据: name,business,label,label_name 沧州光松房屋拆迁有限公司,旧房 ...