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

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

代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html ng-app="notesApp">
  3.  <head>
  4.   <title> New Document </title>
  5.   <style>
  6.     .lightgreen{
  7.         color:lightgreen;
  8.     }
  9.     .green{
  10.         color:green;
  11.     }
  12.     .yellow{
  13.         color:yellow;
  14.     }
  15.   </style>
  16.     <meta charset="gbk">
  17.     <script src="angular1.4.6.min.js"></script>
  18.  </head>
  19.  
  20.  <body ng-controller="MainCtrl as ctrl">
  21.     <p>Hi,I am <span class="{{ctrl.user.name}}">Andy Liu</span> from China</p>
  22.     <p>Hi,I am <span class="{{ctrl.user.name1}}">Andy Liu</span> from China</p>
  23.     <p>Hi,I am <span class="{{ctrl.user.name2}}">Andy Liu</span> from China</p>
  24.  </body>
  25. </html>
  26. <script type="text/javascript">
  27. <!--
  28.     angular.module('notesApp',[])
  29.      .controller('MainCtrl',[function(){
  30.        var self=this;
  31.  
  32.        self.user={name:"lightgreen",name1:"green",name2:"yellow"};
  33.      }]);
  34. //-->
  35. </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. docker镜像与docker容器的区别

    镜像的一个实例称为容器. 你有一个镜像,这是你描述的一组图层. 如果你开始这个镜像,你有一个运行这个镜像的容器. 您可以拥有许多相同镜像的正在运行的容器. docker images 查看所有镜像 d ...

  2. nyoj 325

    zb的生日 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么 ...

  3. linux开机关机自启动或自关闭服务的方式

    背景 由于迁移部门jira和confluence到linux,需要设置这两个服务在开机或关机时能够自动启动或关闭.这里我就拿配置confluence过程来记录. 方式1:chkconfig 特点:ch ...

  4. SQL语句操作符优化

    转载地址:http://database.51cto.com/art/200903/112810.htm IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格. ...

  5. Kotlin-Not enough information to infer parameter T in fun<T:View> findViewById(id: Int): T!

    代码改变世界 错误: Type inference failed : Not enough information to infer parameter T in fun<T:View> ...

  6. Ubuntu 查看默认软件安装位置

    tags: Linux 方法 1:在命令行输入:dpkg -L 软件包名: 方法 2:在/var/cache/apt/archives找的你安装程序的包,然后用gdebi-gtk+软件包名可以查看具体 ...

  7. vue2搭建简易spa

    使用vue-cli来配置webpack,webpack是一个打包工具,使程序模块化 全局安装vue-cli: npm install -g vue-cli 安装好后,使用vue-cli脚手架配置web ...

  8. NodeJS学习（1）--- 安装配置介绍

    Node.js 安装配置 本章节我们将向大家介绍在window和Linux上安装Node.js的方法. 本安装教程以Node.js v6.10.1 LTS(长期支持版本)版本为例. Node.js安装 ...

  9. c++ 中 define

    1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,如果在程序里面写 if(i<MAXTIME){.........} 编译 ...

  10. 石子游戏Kam（bzoj 1115）

    Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏 ...