本文介绍了一个使用AngularJS实现的数据表格应用案例。该表格具备基本的模糊搜索功能，支持按用户名和类型进行过滤，并提供了多种排序选项，如按ID、级别和时间的正序及倒序排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
angular.module("cg",[]).controller("tr",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1")
.success(function(ol){
$scope.datas=ol;
})
})
</script>
</head>
<body ng-app="cg" ng-controller="tr">
<table border="1">
<!-- mohu-->
<input type="text" ng-model="sname" placeholder="用户名搜索"/>
<input type="text" ng-model="stype" placeholder="类型搜索"/>
<!-- paixu-->
<select ng-model="px">
<option value="">排序</option>
<option value="+name">id正序</option>
<option value="-name">id倒序</option>
<option value="+sex">级别正序</option>
<option value="-sex">级别倒序</option>
<option value="+sj">时间正序</option>
<option value="-sj">时间倒序</option>
</select><br />
<tr>
<td>导演</td>
<td>电影售票</td>
<td>电影播放时长</td>
<td>电影类型</td>
<td>电影上映时间</td>
<td>电影评分</td>
</tr>
<tr ng-repeat="x in datas |filter:{name:sname,type:stype}|orderBy:px"> <!--mohu-->
<!--全选-->
<td><input type="hidden" ng-model="x.id"/>
</td>
<td>{{x.name}}</td>
<td >{{x.type}}</td>
<td> {{x.time}}</td>
<td> {{x.author}}</td>
<td> {{x.price}}</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
angular.module("cg",[]).controller("tr",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1")
.success(function(ol){
$scope.datas=ol;
})
})
</script>
</head>
<body ng-app="cg" ng-controller="tr">
<table border="1">
<!-- mohu-->
<input type="text" ng-model="sname" placeholder="用户名搜索"/>
<input type="text" ng-model="stype" placeholder="类型搜索"/>
<!-- paixu-->
<select ng-model="px">
<option value="">排序</option>
<option value="+name">id正序</option>
<option value="-name">id倒序</option>
<option value="+sex">级别正序</option>
<option value="-sex">级别倒序</option>
<option value="+sj">时间正序</option>
<option value="-sj">时间倒序</option>
</select><br />
<tr>
<td>导演</td>
<td>电影售票</td>
<td>电影播放时长</td>
<td>电影类型</td>
<td>电影上映时间</td>
<td>电影评分</td>
</tr>
<tr ng-repeat="x in datas |filter:{name:sname,type:stype}|orderBy:px"> <!--mohu-->
<!--全选-->
<td><input type="hidden" ng-model="x.id"/>
</td>
<td>{{x.name}}</td>
<td >{{x.type}}</td>
<td> {{x.time}}</td>
<td> {{x.author}}</td>
<td> {{x.price}}</td>
</tr>
</table>
</body>
</html>
扫一扫
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
