接口

最新推荐文章于 2023-04-13 21:26:45 发布

原创最新推荐文章于 2023-04-13 21:26:45 发布 · 186 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/js/angular/angular.js"></script>
<style>
/*隔行换色*/

table tr:nth-child(odd) {
background: silver;
}

table tr:nth-child(even) {}
</style>
<script>
//创建一个模块
var app = angular.module("myApp", []);
//创建数据库
app.controller("myCtrl", function($scope, $http) {
//连接json数据
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest").
then(function(d) {
$scope.datas = d.data;
});
//全选
$scope.qx = function() {
for(i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].ck = $scope.flag;
}
}
//删除
$scope.sc = function(dname) {
var f = confirm("是否确定删除");
if(f) {
for(i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].name == dname) {
$scope.datas.splice(i, 1);
alert("删除成功");
}
//用户可以点选删除也可以全选批量删除
if($scope.datas[i].ck) {
$scope.datas.splice(i, 1);
i--;
}
}
}

}

//批量删除
$scope.plsc = function() {
for(i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].ck) {
$scope.datas.splice(i, 1);
i--;
}
}
}
//修改
$scope.xg = function() {
$scope.xgshow = true;

}
//电影名查询
$scope.dym = true;
$scope.ss = function() {
$scope.dym = function(names) {
//判断输入框是否为空
if($scope.dname == undefined || $scope.dname == "") {
return true;
}
//匹配输入的数据
if(names.indexOf($scope.dname) > -1) {
return true;
}
return false;
}
}
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

<input type="text" ng-model="dname" style="border-radius: 8px;" placeholder="按电影名称模糊查询..." />
<button style="border-radius: 8px;background: white;" ng-click="ss()">搜索</button>

<select ng-model="px">
<option value="">按要求排序</option>
<option value="+time">按电影时长正排序</option>
<option value="-time">按电影时长倒排序</option>
<option value="+price">按售价正排序</option>
<option value="-price">按售价倒排序</option>
<option value="-playTime">按上映时间正排序</option>
<option value="+playTime">按上映时间倒排序</option>
<option value="+score">按评分正排序</option>
<option value="-score">按评分倒排序</option>

</select>
<button style="border-radius: 8px;background: white;" ng-click="plsc()">批量删除</button>
<table border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td><input type="checkbox" ng-model="flag" ng-click="qx()" /></td>
<td>电影名称</td>
<td>类别</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>

<tr ng-repeat="d in datas|orderBy:px" ng-show="dym(d.name)">
<td><input type="checkbox" ng-model="d.ck" /></td>
<td>{{d.name}}</td>
<td>{{d.type}}</td>
<td>{{d.time}}分钟</td>
<td>{{d.author}}</td>
<td>{{d.price|currency:"￥:"}}</td>
<td>{{d.playTime|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{d.score}}</td>
<td><button style="border-radius: 8px; background: white;" ng-click="xg()">修改</button>
<button ng-click="sc(d.name)" style="border-radius: 8px; background: white;">删除</button></td>
<td ng-show="xgshow">
<h3>评分修改</h3> 评分:
<input type="text" ng-model="d.score" /><br/>
<button ng-click="xgshow=false">确认修改</button>
</td>
</tr>
</table>
</body>

</html>