angularJs四个指令的使用

109 阅读1分钟
<!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>
	<body ng-app="myApp">
		<!-- 
		* ng-class: 动态切换class,多用于表格的间隔色显示
					语法:ng-class="{第一个类名:true,第二个类名:false}";
		* ng-style: 修改样式
		* ng-mouseenter: 鼠标移入
		* ng-mouseleave: 鼠标移出
		 -->
		 <table ng-controller="z2">
		 	<thead>
		 		<th>序号</th>
		 		<th>是否为最后一行</th>
		 		<th>姓名</th>
		 		<th>年龄</th>
		 	</thead>
		 	<!-- 一旦使用了ng-repeat对数组进行遍历,那么angularJS会为每个元素都创建一个作用域 -->
		 	<tbody ng-repeat="uu in user">
		 		<tr ng-class="{l:$odd,a:$even}">
		 			<!-- 获取序号,从0开始 -->
		 			<td>{{$index+1}}</td>
		 			<td>{{$odd}}</td>
		 			<td ng-bind='uu.username'></td>
		 			<td>{{uu.age}}</td>
		 		</tr>
		 	</tbody>
		 </table>
		 <div ng-controller="z3" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="mystyle">
		 </div>
		 <script src="../js/angular-1.2.9.js" type="text/javascript" charset="utf-8"></script>
		 <script type='text/javascript'>
			 angular.module('myApp',[])
			 	.controller('z2',['$scope', function(a){
			 		a.user = [
			 			{username:'刘博',age:23},
			 			{username:'韩方兴',age:21},
			 			{username:'陈美琪',age:18},
			 			{username:'陈美琪',age:18}
			 		];
			 	}])
				.controller('z3',['$scope', function(a){
					a.enter = function(){
						a.mystyle = {
							background : "blue"
						};
					}
					a.leave = function(){
						a.mystyle = {
							background : "red"
						};
					}
				}])
		 </script>
	</body>
</html>