https://docs.angularjs.org/api/ng/directive/ngClass

翻译

  1. 表达式生成一个空格饭分隔的class字符串
  2. 一个对象,它的每一个key在其值为true的时候作为class来用
  3. 一个数组,数组的项可以是第一种/第二种, 或者他们的混合
$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的更多相关文章

  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. js封装包

    (function () { //check the class name , it will be replaced when existed if (window.IQCBase) { //ret ...

随机推荐

  1. LuaJit转义的问题

    之前在项目中,处理类似!30转为表现的字符串时,有人写了这样的一段代码"\![1-2][0-9]",当换成luajit时启动报错了,出错原因在于转义字符使用不对.在很多语言中,正则 ...

  2. hdu 2049 不easy系列之(4)——考新郎

    不easy系列之(4)--考新郎 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. Material Designer的低版本兼容实现(十一)—— Switch

    5.0中的switch和之前完全不同了,漂亮不漂亮咱们另说,总之4.x上是没有这样的效果了.实现方式有两种,一种是用这个兼容包来做类似的效果,一种是用传统的checkbox来代替.我感觉兼容包的效果是 ...

  4. Minikube体验

    本文的环境如下: 操作系统: Mac OSX EI Caption Docker:Docker version 18.03.1-ce, build 9ee9f40 Minikube:minikube ...

  5. SVG.js 颜色渐变使用

    一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...

  6. scp命令:服务器间远程复制代码

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...

  7. 关于NLP和深度学习,准备好好看看这个github,还有这篇介绍

    这个github感觉很不错,把一些比较新的实现都尝试了: https://github.com/brightmart/text_classification fastText TextCNN Text ...

  8. [leetcode]N-Queens @ Python

    原题地址:https://oj.leetcode.com/problems/n-queens/ 题意:经典的N皇后问题. 解题思路:这类型问题统称为递归回溯问题,也可以叫做对决策树的深度优先搜索(df ...

  9. ThinkPHP3.2.3使用分页

    首先要搞清楚的就是ThinkPHP3.2.3的分页类已经被移到了Think\Page.class.php,这是跟以前的版本有些不一样的,使用起来还是跟以前版本差不多,但是默认的效果不敢恭维,所以最好是 ...

  10. JS读取XML文件数据并以table显示数据(兼容IE火狐)

    先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinf ...