代码下载：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. LINUX 常用指令学习

    目录 0 查找find 1 别名alias 2 变量的设置 3 常用的系统变量 4 通配符及组合按键 5 指令之间的分隔符(;&||) 6 输出重定向(>,>>,1>, ...

  2. 在控制器“xxxx”上找不到与该请求匹配的操作

    Message:"找不到与请求 URI"http://localhost:8091/Api/CommonApi/SelectBind/GetBudCategoryListByCID ...

  3. 快乐的Linux命令行

    ls - 列出目录内容 -a 列出所有文件 -d 指定目录信息 -F 为目录增加/标识 -h 增强可读性 -l 列模式显示 -r 反序显示 -S 按照大小排序 -t 按照修改时间排序 file - 确 ...

  4. 节点流——FileInputStream&FileOutputStream

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  5. BZOJ3524 [Poi2014]Couriers 【主席树】

    题目 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. 输入格式 第一 ...

  6. g2o初始化一些

    今天看了一下智能指针的东西,发现更简单的思路: 就是Block和solver构造时,需要传递unique_ptr,那我们将普通指针转换成unique_ptr不就可以了么: // 初始化g2o //第一 ...

  7. Python 读取 pkl文件

    使用python 的cPickle 库中的load函数,可以读取pkl文件的内容 import cPickle as pickle fr = open('mnist.pkl') #open的参数是pk ...

  8. 从零开始实现放置游戏（六）——实现挂机战斗（4）导入Excel数值配置

    前面我们已经实现了在后台管理系统中,对配置数据的增删查改.但每次添加只能添加一条数据,实际生产中,大量数据通过手工一条一条添加不太现实.本章我们就实现通过Excel导入配置数据的功能.这里我们还是以地 ...

  9. git repo gerrit 的关系

    Git作为一个版本控制工具,功能很强大,新建分支,切换分支都很快,小团队用Git就能很好地管理好了,但如果是Android系统如此庞大的工程呢,我们知道全套Android源码是很大很大的,目录结构也很 ...

  10. pat 甲级 1022. Digital Library (30)

    1022. Digital Library (30) 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A Di ...