<html>
<head>
<meta charset="utf-8"/>
<script src="js/angular.min.js" ></script>
<style type="text/css">
html,body{margin: 0;padding: 0; box-sizing: border-box;}
table{width: 100%; border-collapse:collapse; text-align: center; cursor: pointer;}
thead{background-color: #CCCCCC;}
tbody{color: dodgerblue; }
th,td{border:1px solid red; }
ul{padding: 0; margin: 0;}
ul li{list-style: none; background-position: ;}
.girl{color: gray;}
</style>
</head>
<body ng-app="myapp" ng-controller="one">
<div>
<fieldset>
<legend>老湿资料</legend>
<table >
<thead>
<tr>
<th>名字</th>
<th>班级</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in mytb">
<td>{{y.name}}</td>
<td ng-class="{girl:y.sex==‘男‘}" ng-click="speak(y.sex)">{{y.sex}}</td>
<td>{{y.age}}</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script type="text/javascript">
angular.module("myapp",[]).controller("one",function($scope,$http){
$http.get("js/db.json").success(function(request){
$scope.mytb=request;
$scope.speak=function(sex){
if(sex=="女"){
alert("只有性别为"+sex+",才会弹噢！")
}
}
})
})
</script>
</body>
</html>
[{
"name":"王老师",
"sex":"男",
"age":"25岁"
},{
"name":"张老师",
"sex":"女",
"age":"30岁"
},{
"name":"李老师",
"sex":"女",
"age":"20岁"
},{
"name":"丁老师",
"sex":"男",
"age":"20岁"
}]
时间： 2024-10-09 15:17:21