<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/angularjs.js"></script>
<style>
body{
font-size: 32px;
}
ul{
list-style-type: none;
width: 408px;
margin:0px;
padding: 0px;
}
ul .odd{
color:#0026ff;
}
ul .even{
color:#ff0000;
}
ul .bold{
font-weight:bold;
color:red;
}
ul li span{
width: 52px;
float:left;
padding:0px 10px;
}
ul .focus{
background: #cccccc;
}
</style>
</head>
<body>
<div ng-controller="c2_ll">
<ul>
<li ng-class="{{bold}}">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li ng-class-even="even" ng-class-odd="odd" ng-repeat="stu in data" ng-click="li_click($index)" ng-class="{focus: $index==focus}">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
</body>
<script>
var app=angular.module('myapp',[]);
app.controller('c2_ll',function($scope){
$scope.bold="bold";
$scope.li_click=function(i){
$scope.focus=i;
};
$scope.data=[
{name:"11",sex:"女"},
{name:"22",sex:"女"},
{name:"33",sex:"男"},
{name:"44",sex:"男"}
]
})
</script>
</html>

利用angular给节点添加样式的更多相关文章

  1. Angular 4 设置组件样式的几种方式

      你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置:   图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样 ...

  2. 利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...

  3. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  4. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  5. javaScript动态添加样式

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...

  6. AngularJS添加样式

    AngularJS添加样式 通过controller.js中的某个$scope变量的值来决定div标签(或者其他html标签)的样式表. 示例 使用ng-style指令在div标签上 <body ...

  7. Angular中使用bootstrap样式

    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...

  8. MongoDB 副本集节点添加与删除

    replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 查看复制打印 rep ...

  9. js 与 jq 的节点添加删除实例

    JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf ...

随机推荐

  1. linux性能分析及调优

    第一节:cpu 性能瓶颈 计算机中,cpu是最重要的一个子系统,负责所有计算任务: 基于摩尔定律的发展,cpu是发展最快的一个硬件,所以瓶颈很少出现在cpu上: 我们线上环境的cpu都是多核的,并且基 ...

  2. TypeScript入门-泛型

    泛型 要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,TypeScript提供了一个很好的方法:泛型 Hello World 要兼容多种数据格式,可能会有人想到any,即 ...

  3. codeforces 803B Distances to Zero

    Distances to Zero 题目链接:http://codeforces.com/problemset/problem/803/B 题目大意: 给一串数字,求每个数字到离他最近数字0的距离.. ...

  4. java.util.prefs.Preferences

    java.util.prefs.Preferences Preferences类是在JDK1.4中首次提供的,可以用它来存放应用程序的配置数据,这里对Preferences类做点介绍. 1.Prefe ...

  5. 如何使用angular-ui的弹出框

    在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...

  6. 用ng-view创建单页APP

    我们假设我们有一个单页面的程序,并且想为这个页面添加动画效果.点击某一个链接会将一个试图滑出,同时将另一个试图滑入. 我们将会使用: 使用 ngRoute 来为我们的页面路由 使用 ngAnimate ...

  7. ReactiveCocoa学习总结(2)

    信号(signal)- RACSignal类 1. 一般表示将来有数据传递,只要有数据改变,信号内部接收到数据,就会马上发出数据. 2. 事件类型: next:发送数据到下一个管道 error:发送数 ...

  8. 热切换Log4j级别配置

    欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...

  9. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  10. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...