利用angular给节点添加样式
<!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给节点添加样式的更多相关文章
- Angular 4 设置组件样式的几种方式
你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置: 图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样 ...
- 利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
- jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
- javaScript动态添加样式
[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...
- AngularJS添加样式
AngularJS添加样式 通过controller.js中的某个$scope变量的值来决定div标签(或者其他html标签)的样式表. 示例 使用ng-style指令在div标签上 <body ...
- Angular中使用bootstrap样式
Angular中使用bootstrap样式 Angular中引入bootstrap的方法 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...
- MongoDB 副本集节点添加与删除
replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 查看复制打印 rep ...
- js 与 jq 的节点添加删除实例
JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf ...
随机推荐
- UBIFS文件系统介绍
1. 引言 UBIFS,Unsorted Block Image File System,无排序区块图像文件系统.它是用于固态硬盘存储设备上,并与LogFS相互竞争,作为JFFS2的后继文件系统之一 ...
- map中结构体做关键字的注意事项
序: 今天做一道题,由于递归函数比较恶心,如果用记忆化搜索,数据范围极大却又用不全(二维数组存的话直接炸).所以决定干脆使用stl::map存储(反正有O2优化),但是执行insert的时候,编译器却 ...
- 详解Java动态代理机制（二）----cglib实现动态代理
上篇文章的结尾我们介绍了普通的jdk实现动态代理的主要不足在于:它只能代理实现了接口的类,如果一个类没有继承于任何的接口,那么就不能代理该类,原因是我们动态生成的所有代理类都必须继承Proxy这个类, ...
- python object takes no parameters
class Song(object): def __init__(self,lyrics): self.lyrics = lyrics def sing_me_a_song(self): for li ...
- Android获取状态栏高度、标题栏高度、编辑区域高度
一.Activity界面的划分 简单说明一下(上图Activity采用默认Style,状态栏和标题栏都会显示):最大的草绿色区域是屏幕界面,红色次大区域我们称之为"应用程序界面区域" ...
- PXC5.7集群部署
PXC三节点安装: node1:10.157.26.132 node2:10.157.26.133 node3:10.157.26.134 配置服务器ssh登录无密码验证 ssh-keygen实现 ...
- Linux的环境变量设置和查看
一.Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1.永久的:需要修改配置文件,变量永久生效. 2.临时的:使用export命令声明即可,变量在关闭shell时失效. 二. ...
- OpenStack Newton版本Ceph集成部署记录
2017年2月,OpenStack Ocata版本正式release,就此记录上一版本 Newton 结合Ceph Jewel版的部署实践.宿主机操作系统为CentOS 7.2 . 初级版: 192. ...
- Spring BeanFactory源码学习
一.BeanFactory BeanFactory是Spring IOC容器的基础,是IOC容器的基础接口,所有的容器都是从它这里继承实现而来.BeanFactory提供了最基本的IOC容器的功能,即 ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...