ng-class ng-style
https://docs.angularjs.org/api/ng/directive/ngClass

翻译
- 表达式生成一个空格饭分隔的class字符串
- 一个对象,它的每一个key在其值为true的时候作为class来用
- 一个数组,数组的项可以是第一种/第二种, 或者他们的混合
$scope.menuitems=[
{id: 1, state: "admin.user", text: "用户", icon: "glyphicon-user"},
{id: 2, state: "admin.role", text: "角色", icon: "glyphicon-tree-conifer"},
{id: 3, state: "admin.right", text: "权限", icon: "glyphicon-lock"},
];
<ul class="menu_list">
<li ng-repeat="menu in $ctrl.menuitems">
<a ng-class="{'active': selectId == menu.id}" ui-sref="{{menu.state}}" ng-click="$ctrl.selectId=menu.id">
<span ng-class="'glyphicon ' + menu.icon"></span> {{menu.text}}
</a>
</li>
</ul>
ng-style
接收一个对象,key是style name,值是style value
https://docs.angularjs.org/api/ng/directive/ngStyle

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
ng-class ng-style的更多相关文章
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- Flume NG Getting Started(Flume NG 新手入门指南)
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- Ng Alain使用 - cli和克隆两种方式
感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- ng环境搭建步骤
1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...
- 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 ...
- [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案
2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...
- ng 构建
1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...
- Angular CLI 启动 版本ng 4
npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200
- js封装包
(function () { //check the class name , it will be replaced when existed if (window.IQCBase) { //ret ...
随机推荐
- Kettle优化就这么多
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/ClamReason/article/details/49930479 Kettle正常转换速度 场景 ...
- 执行tsung时报"Maximum number of concurrent users in a single VM reached
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://ovcer.blog.51cto.com/1145188/1581326 [roo ...
- Android 常用的数据加密方式
前言 Android 很多场合需要使用到数据加密,比如:本地登录密码加密,网络传输数据加密,等.在android 中一般的加密方式有如下: 亦或加密 AES加密 RSA非对称加密 当然还有其他的方式, ...
- centos7 开机启动管理
查看开机启动项 ls /etc/systemd/system/multi-user.target.wants/ 设置开机启动 systemctl enable mongodb.service
- 《MATLAB面向对象程序设计》
<MATLAB面向对象程序设计> 基本信息 作者: 苗志宏 马金强 出版社:电子工业出版社 ISBN:9787121233449 上架时间:2014-6-18 出版日期:2014 年 ...
- 如果类型是dynamic的且其属性也是dynamic的
在 MVC 中,如果尝试如下的编码: public ActionResult TeacherInfo(string courseId) { var x = LearningBll.GetTea ...
- Spring Test, JUnit, Mockito, Hamcrest 集成 Web 测试
关于Spring 3.2 1. Spring 3.2 及以上版本自动开启检测URL后缀,设置Response content-type功能, 如果不手动关闭这个功能,当url后缀与accept头不一致 ...
- C/C++ 关于 for循环 的第二个表达式右侧非常量的时候
废话不多说,直接看代码: #include<stdio.h> int main(){ ; ;z<zmax;z++){ printf("i=%d z=%d\n",i ...
- Java vs C++ (7)导入
用法 import VS include Java import java.util.regex.Pattern; package com.slim; (1)假设少了; 会warning: C++ ...
- Go语言之进阶篇Socket编程
一.Socket编程 1.什么是Socket Socket起源于Unix,而Unix基本哲学之一就是“一切皆文件”,都可以用“打开open –> 读写write/read –> 关闭clo ...