<pre name="code" class="html"><!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>ee</title>
<script type="text/javascript" src="angular.min.js"></script>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin:0;
padding: 0;
}
ul li {
float: left;
padding: 5px 0;
}
ul .odd {
color: #0026ff;
}
ul .even {
color: #ff0000;
}
ul .bold {
font-weight: bold;
}
ul li span {
width: 52px;
float: left;
padding: 0 10px;
}
ul .focus {
background-color: #cccccc;
}
</style>
</head>
<body>
<div ng-controller="c12">
<ul>
<li ng-class=" {{bold}} ">
<span>序号</span>
<span>姓名</span>
<span>是否首条</span>
<span>是否尾条</span>
</li>
<li ng-class-odd="'odd'"
ng-class-even="'even'"
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>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("c12", ['$scope', function($scope) {
$scope.bold = "bold";
$scope.li_click = function($index) {
$scope.focus = $index;
}
$scope.data = [
{name:'aaa', 'sex':'m'},
{name:'bbb', 'sex':'m'},
{name:'ccc', 'sex':'m'},
{name:'ddd', 'sex':'m'},
]
}])
</script>
</body>
</html>angularjs类选择
最新推荐文章于 2022-04-06 13:42:25 发布
2886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
