<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<!--
常用指令(二)
* ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
* ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
* ng-click: 点击监听, 值为函数调用, 可以传$event
* ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
* ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
-->
<style>
.evenB {
background-color: lightsalmon;
}
.oddB {
background-color: lightgreen;
}
</style>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div style="width: 200px;height: 100px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="leave()">
</div>
<!--使用 ng-class 及ng-repeat自带属性 $odd $even 隔行变色-->
<ul>
<li ng-class="{oddB:$odd,evenB:$even}" ng-repeat="x in persons">{{x.username}} -- {{x.age}}</li>
</ul>
</div>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.myStyle = {background: 'lightgray'}; //添加初始化背景颜色
$scope.enter = function () {
this.myStyle.background = 'pink';//鼠标移入背景颜色
};
$scope.leave = function () {
this.myStyle.background = 'lightblue';
};
$scope.persons=[
{username:'kobe1',age:'39'},
{username:'kobe2',age:'39'},
{username:'kobe3',age:'39'},
{username:'kobe4',age:'39'},
{username:'kobe5',age:'39'},
];
})
</script>
</body>
</html>
