<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.l{
background-color: #31B0D5;
}
.a{
background-color: #777777;
}
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<!--
* ng-class: 动态切换class,多用于表格的间隔色显示
语法：ng-class="{第一个类名:true,第二个类名:false}";
* ng-style: 修改样式
* ng-mouseenter: 鼠标移入
* ng-mouseleave: 鼠标移出
-->
<body ng-app="myApp">
<!-- in表达式：类似于增强for循环 -->
<table ng-controller="z2">
<thead>
<th>序号</th>
<th>是否为最后一行</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody ng-repeat="user in users">
<!-- 一旦使用ng-repeat对数组进行遍历，那么angularJS会为每个元素都创建一个作用域 -->
<tr ng-class="{l:$odd,a:$even}">
<td>{{$index+1}}</td>
<td>{{$odd}}</td>
<td ng-bind="user.username"></td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
<div ng-controller="z3" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="z3_style">
</div>
<script src="js/angular.min-1.2.9.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("myApp",[])
.controller('z2',['$scope',function(z2f){
/* 数组，每一个元素都是一个对象 */
z2f.users=[
{username:"嘎嘎嘎",age:20},
{username:"咕咕咕",age:26},
{username:"呱呱呱",age:25}
];
}])
.controller('z3',['$scope',function(z3f){
/* 数组，每一个元素都是一个对象 */
z3f.enter = function(){
z3f.z3_style = {
background:"black"
};
}
z3f.leave = function(){
z3f.z3_style = {
background:"red"
};
};
}])
</script>
</body>
</html>
