代码下载：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. 课堂笔记III

  2. js的trim方法

    ie9以前版本,不支持string.trim()方法 所以需要自己实现. <script type="text/javascript"> String.prototyp ...

  3. [HEOI2016/TJOI2016][bzoj4554] 游戏 [建图+最大流]

    题面 传送门 思路 看到棋盘摆放和棋子冲突,再加上这么小的数据范围,你能想到什么? 网络流棋盘模型啊! 就是 把源点连到每一行,每一列连到汇点,再在中间...... 等等,这道题每行不一定全部冲突?? ...

  4. 微信小程序微信支付流程

    1.小程序调用wx.login获取登录凭证code wx.login(无请求参数)返回code(有效期5分钟) wx.login({ success:function(res){ //get res. ...

  5. 无序字母对 character

    无序字母对 character 题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 输入 ...

  6. android在JNI_OnLoad入口函数下断点动态调试so库

    一般来说,很多APK的校验代码,都会在程序运行的时候自动加载一些动态so库,然后执行这些库中的校验代码.所以为了能够通过程序的校验,我们必须在执行这些函数之前下断点——理想的方法就是在JNI_OnLo ...

  7. 【02】react 之 jsx

    React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲 ...

  8. 【09】node 之 fs流读写

    前面我们已经学习了如何使用fs模块中的readFile方法.readFileSync方法读取文件中内容,及如何使用fs模块中的writeFile方法.writeFileSync方法向一个文件写入内容. ...

  9. SQLServer (2005/2008) 日志清理方法

    --数据库日志名称查询 USE DBNAME GO SELECT file_id, name,* FROM sys.database_files; GO------------------------ ...

  10. Mysql EXISTS NOT EXISTS

    SELECT c.CustomerId, CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID FROM Orders o WHERE o ...