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