<!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>