本文介绍了一个使用AngularJS实现的动态表格数据管理示例，包括数据加载、过滤、排序及批量删除等功能。通过实例展示了如何利用AngularJS进行高效的数据操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/js/angular.min.js"></script>
<script>
var app = angular.module("app1", []);
app.controller("tbl", function($scope, $http) {
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(aa) {
$scope.datas = aa;
})
$scope.delAll=function(){
for(var i=0;i<$scope.datas.length;i++){
if ($scope.datas[i].c){
$scope.datas.splice(i,1);
i--;
}
}
}
});
</script>
<style>
/*隔行变色*/
table tr:nth-child(2n+1){
background: #2FAE2E;
}
table tr:nth-child(2n){
background: red;
}
</style>
</head>
<body ng-app="app1" ng-controller="tbl">
{{datas}}
<input ng-model="sname" placeholder="请输入商品名称"/>
<input ng-model="stel" placeholder="请输入查询的手机号码"/>
<select ng-model="ss">
<option value="">请选择</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="delAll()">批量删除</button>
<table border="1px">
<tr>
<td>
<input type="checkbox" ng-model="ck" ng-click="gb()" />
</td>
<td>id<button ng-click="px='id';f=!f">排序</button></td>
<td>商品名称</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';f=!f">排序</button></td>
<td>城市</td>
<td>下单时间</td>
<td>状态</td>
</tr>
<tr ng-repeat="d in datas|filter:{gname:sname,tel:stel,state:ss}|orderBy:px:f">
<td><input type="checkbox" ng-model="d.c" /> </td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>{{d.price|currency:"￥"}}</td>
<td>{{d.provice}}—{{d.city}}</td>
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: yellow;" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a>
</span>
<span style="background: green;" ng-show="d.state=='已发货'">已发货</span>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/js/angular.min.js"></script>
<script>
var app = angular.module("app1", []);
app.controller("tbl", function($scope, $http) {
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(aa) {
$scope.datas = aa;
})
$scope.delAll=function(){
for(var i=0;i<$scope.datas.length;i++){
if ($scope.datas[i].c){
$scope.datas.splice(i,1);
i--;
}
}
}
});
</script>
<style>
/*隔行变色*/
table tr:nth-child(2n+1){
background: #2FAE2E;
}
table tr:nth-child(2n){
background: red;
}
</style>
</head>
<body ng-app="app1" ng-controller="tbl">
{{datas}}
<input ng-model="sname" placeholder="请输入商品名称"/>
<input ng-model="stel" placeholder="请输入查询的手机号码"/>
<select ng-model="ss">
<option value="">请选择</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="delAll()">批量删除</button>
<table border="1px">
<tr>
<td>
<input type="checkbox" ng-model="ck" ng-click="gb()" />
</td>
<td>id<button ng-click="px='id';f=!f">排序</button></td>
<td>商品名称</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';f=!f">排序</button></td>
<td>城市</td>
<td>下单时间</td>
<td>状态</td>
</tr>
<tr ng-repeat="d in datas|filter:{gname:sname,tel:stel,state:ss}|orderBy:px:f">
<td><input type="checkbox" ng-model="d.c" /> </td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>{{d.price|currency:"￥"}}</td>
<td>{{d.provice}}—{{d.city}}</td>
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: yellow;" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a>
</span>
<span style="background: green;" ng-show="d.state=='已发货'">已发货</span>
</td>
</tr>
</table>
</body>
</html>
扫一扫
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
