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 ...
随机推荐
- 自定义兼容多种Protobuf协议的编解码器
<从零开始搭建游戏服务器>自定义兼容多种Protobuf协议的编解码器 直接在protobuf序列化数据的前面,加上一个自定义的协议头,协议头里包含序列数据的长度和对应的数据类型,在数据解 ...
- Unity3D 经常使用库
JSON.NET:http://james.newtonking.com/json LitJSON: http://lbv.github.io/litjson/ ProtoBuf - net:htt ...
- 使用 STHTTPRequest 框架解析 Soap1.2 教程
1.STHTTPRequest框架地址 https://github.com/nst/STHTTPRequest 将 STHTTPRequest .h STHTTPRequest.m 文件拖入工程中 ...
- 同志亦凡人第五季/全集BQueer As Folk 5迅雷下载
同志亦凡人 第五季 Queer as Folk Season 5 (2005) 本季看点:这是一群生活在匹兹堡男人和男人,女人和女人的故事.在他们的王国里有各色人物.王国的国王Brian(葛尔?哈罗德 ...
- Adapter数据变化改变现有View的实现原理及案例
首先说说Adapter详细的类的继承关系.例如以下图 Adapte为接口它的实现类的对象作为AdapterView和View的桥梁,Adapter是装载了View(比方ListView和girdVie ...
- Shape画圆形控件
这里涉及到shape的运用,这仅仅是一个实例 circle.xml <?xml version="1.0" encoding="utf-8"?> & ...
- Docker存出载入镜像
镜像的存出和载入 如果你的生产环境不能连通互联网,而你又希望从互联网上获取镜像.你就需要借助 docker save命令,可以将镜像导出为 tar 文件.使用 docker load 命令,可以将ta ...
- 分享到微信、微博、QQ空间、QQ微博
一:分享到微信 //分享到微信$("#weixin").bind("click", function () { var p = { url: ...
- poj 2348 Euclid's Game 题解
Euclid's Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9023 Accepted: 3691 Des ...
- go语言之进阶篇 select实现的超时机制
1.select实现的超时机制 示例: package main import ( "fmt" "time" ) func main() { ch := mak ...