代码下载：https://files.cnblogs.com/files/xiandedanteng/angularJSSelectClass.rar

要点，{{ctrl.name}}比<span ng-bind="ctrl.name"></span>要更加灵活，下例中他将作为css选择器使用。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
  <style>
    .lightgreen{
        color:lightgreen;
    }
    .green{
        color:green;
    }
    .yellow{
        color:yellow;
    }
  </style>
    <meta charset="gbk">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
    <p>Hi,I am <span class="{{ctrl.user.name}}">Andy Liu</span> from China</p>
    <p>Hi,I am <span class="{{ctrl.user.name1}}">Andy Liu</span> from China</p>
    <p>Hi,I am <span class="{{ctrl.user.name2}}">Andy Liu</span> from China</p>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.user={name:"lightgreen",name1:"green",name2:"yellow"};
     }]);
//-->
</script>

效果：

AngularJS中选择样式的更多相关文章

  1. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  2. AngularJS中的DOM与事件

      前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" ...

  3. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  4. angularjs中ng-class常用写法，三元表达式、评估表达式与对象写法

     壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...

  5. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

  7. 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较

    在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...

  8. AngularJS中实现无限级联动菜单（使用demo）

    昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代 ...

  9. AngularJS中实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...

随机推荐

  1. 【Appnium+C#+Winform自动化测试系列】一、获取本机连接的设备、启动多个Appnium和获取本机启动的Appnium

    本系列内容,准备根据所完成的项目为基线,一步一步的把整个设计和实现过程梳理. 先从基本的一些环境问题入手,梳理清楚关于手机设备和Appnium.因为我们在后面的建立Appnium连接时,需要设备名字和 ...

  2. PYTHON资源入口汇总

    Python资源入口汇总 官网 官方文档 教程和书籍 框架 数据库 模板 工具及第三方包 视频 书籍 博客 经典博文集合 社区 其他 整理中,进度30% 官网 入口 官方文档 英文 document ...

  3. nginx通过spawn-fcgi调用C++写的cgi程序

    通过apt-get install 安装nginx和spawn-fcgi /usr/local/nginx/sbin/spawn-fcgi -a 127.0.0.1 -p 9002 -C 25 -f  ...

  4. P3078 [USACO13MAR]扑克牌型Poker Hands

    题目描述 Bessie and her friends are playing a unique version of poker involving a deck with N (1 <= N ...

  5. 一道背包神题-Petrozavodsk Winter-2018. Carnegie Mellon U Contest Problem I

    题目描述 有\(n\)个物品,每个物品有一个体积\(v_i\),背包容量\(s\).要求选一些物品恰好装满背包且物品个数最少,并在这样的方案中: (1)求出中位数最小的方案的中位数(\(k\)个元素的 ...

  6. [ZJOI2012][bzoj 2816] 网络 network [LCT]

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2816 思路: 第一个条件看完暂时还没什么想法 看完第二个,发现每一个颜色都是一个森林 进而想 ...

  7. Python之面向对象：封装

    1.封装的概念 将对象的数据与操作数据的方法相结合,通过方法将对象的数据与实现细节保护起来,就称为封装.外界只能通过对象的方法访问对象,因此封装同时也实现了对象的数据隐藏. 在使用面向对象的封装特性时 ...

  8. JavaScript Array 对象的方法，比如push和unshift

    https://www.runoob.com/jsref/jsref-obj-array.html js数组与字符串的相互转换 一.数组转字符串 需要将数组元素用某个字符连接成字符串,示例代码如下: ...

  9. Treblecross（uva 10561）

    题意:一个 1 × n 的棋盘,有 X 和 :,当棋盘上出现三个连续的X 时游戏结束,两人轮流操作,每次能把一个 : 变成 X,问先手必胜方案数以及先手可以放的位置. /* 对于先手,当有一个'X'时 ...

  10. Entity Framework context per request

    原文发布时间为:2011-09-24 -- 来源于本人的百度文章 [由搬家工具导入] http://www.blog.cyberkinetx.com/2011/05/15/entity-framewo ...