JS JQ ANGULAR
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- _ooOoo_
o8888888o
88" . "88
(| -_- |)
O\ = /O
____/`---'\____
.' \\| |// `.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' | |
\ .-\__ `-` ___/-. /
___`. .' /--.--\ `. . __
."" '< `.___\_<|>_/___.' >'"".
| | : `- \`.;`\ _ /`;.`/ - ` : | |
\ \ `-. \_ __\ /__ _/ .-` / /
======`-.____`-.___\_____/___.-`____.-'======
`=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
佛祖保佑 永无BUG-->
<!--
MMMMM
MMMMMM
MMMMMMM
MMMMMMMM .
MMMMMMMMM
HMMMMMMMMMM
MMMMMMMMMMMM M
MMMMMMMMMMMMM M
MMMMMMMMMMMMM M
MMMMMMMMMMMMM:
oMMMMMMMMMMMMMM
.MMMMMMMMMMMMMMo MMMMMMMMMMMMMMM M
MMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMM. oMMMMMMMMMMMMMMM.M
MMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM: H
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM . MMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM M MMMMMM
.MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM M MMMMMMMMMM
MM. MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM M MMMMMMMMMMMM
MM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM .MMMMMMMMMMMMMM
MM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
.MMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMM.MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
HMMMMMMMMMMMMMMMMMMMMM.MMMMMMMMM.MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMM MMM.oMMMMMMM..MMMMMMMMM:MMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMM MM..MMMMMMM...MMMMMMM. MMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMM ..MMMMMM...MMMMMM ..MMMMMMMMMMMMMMMMMMM
MMMMMMM:M.MMM.M.. MMMMM M..MMMMM...MMMMMMMMMMMMMMMMMM MMM
MMMM. .M..MM.M...MMMMMM..MMMMM.. MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM .
MMMM..M....M.....:MMM .MMMMMM..MMMMMMM...MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMM.M.. ...M......MM.MMMMM.......MHM.M .MMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMM..MM. . MMM.....MMMMMM.M.....M ..MM..M MMMMMMMMMMMMMMMMMMM
.MMMMMHMM. ..MMMM. MMM............o..... . .MMMMMMMMMMMMMMM
MMM. M... .........................M..:.MMMMMMMMMMMM
oMMM............ .................M.M.MMMMMMMMM
.....MM........................ . MMMMMM
M.....M.....................o.MM.MMMMMMMM.
M........................M.. ...MMMMMMMMMMMMMo
:....MMM..............MMM..oMMMMMMM
M...MMM.............MMMMMMM
.............:MMMMMMMM
M..... MMM.....M
M M.............
................M
ooM.................MM MoMMMMMoooM
MMoooM......................MoooooooH..oMM
MHooooMoM.....................MMooooooM........M
oooooooMoooM......... o........MoooooooM............
Mooooooooooo.......M.........Moooooooo:..............M
MooMoooooooooM...M........:Mooooooooooo:..............M
M..oooooooooooo .........Mooooooooooooooo..............M
M...Mooo:oooooooo.M....ooooooooooooooooooo..M...........M
...oooooMoooooooM..Mooooooooooooo:oooooooM.M...........M.
M...ooooooMoo:ooooMoooooooooooooHoooooooooH:M. ...........:
M..MoooooooMoooooooooooooooooo:ooooooMooooMoM..............M
M..ooooooooooMooooooooooooooHoooooooMooHooooM...............M
...ooooooooooooooooooo:MooooooooooooooMoMoooM................
M...oooooooooooooooooooooooooooooooooooooMooMM................M
...MooooooooooooooooooooooooooooooooooooooooMo ................
...MooooooooooooooooooooooooooooooooooooooooM M................M
M...ooooooooooooooooooooooooooooooooooooooooM ................M
...MoooooooooooooooooooooooooooooooooooooooMM .:...............
.....MooooooooooooooooooooooooooooooooooooMoo .............M
M...... ooooooooooooooooooooooooooooooooooooM M..............M
M........MooooMMM MM MM MMMMMMMMMooooooooM M...............M
.........HM M: MM :MMMMMM M M...............
M..........M M MoM M M................M
M.........:M MoH M M M MooooHoooMM. M M...............M
M..........Moooo MMooM oooooMooooooooM M..............H
M.........MooooM Mooo : ooooooMooooMoooM M........ . .o.M
H.. .....ooooo oooo M MooooooooooooooM M... MMMMMMMMMMM
MMMMMMMMMMooooM M oooo . ooooooMooooooooM .MMMMMMMMMMMMMMM
MMMMMMMMMMooooH : ooooH oooooooooooooooo MMMMMMMMMMMMMMM
MMMMMMMMMMoooo ooooM Moooooooooooooooo .MMMMMMMMMMMMMMM
MMMMMMMMMMoooo ooooM MooooooooooooooooM MMMMMMMMMMMMMMM
MMMMMMMMMMoooM ooooM ooooooooooooooooo MMMMMMMMMMM:M
MMMMMMMMMMoooM MooooM oooooooooooMoooooo MH...........
. ......Mooo. MooooM oooooooooooooooooo M............M
M.M......oooo MooooM Moooooooooooooooooo: .........M.....
M.M.....Moooo MooooM ooooooooooooooooooM .M............
.......MooooH MooooM oooooooooMoooooooooo M..o...M..o....M
.o....HMooooM MooooH MooooooooMooooooooooM .:M...M.......M
M..M.....MoooM :oooo: .MooooooooHooMoooooooooM M M... ..oM.M
M...M.:.Mooo. MMMMooooo oooooooooooMoooooooooooooM ....M. M
M:M..o.Moooooooooooooo MooooooooooooooMooooooooooooM .Mo
MooooooooooooooMooooooooooooMoMoooooooooooooo
Mooooooooooooooo:ooooooooooooooooooooooooooooo
ooooooooooooooooMooooooooooMoooooooooooooooooo
ooooooooooooooooMoooooooooooMooooooooooooooooHo
ooMooooooooooooooMoooooooooooooooooooooooooooMoM
MooMoooooooooooooo.ooooooooooooooooooooooooooo:oM
MoooooooooooooooooooooooooooooooooooooooooooooooM
MoooMooooooooooooooMooooooooooooooooooooooooooooo.
MoooMooooooooooooooMoooooooooooooooooooooooooMooooM
MooooooooooooooooooMoooooooooooooooooooooooooMoooooM
MooooMoooooooooooooMoooooooooooooooooooooooooMoHooooM
ooooooMooooooooooooooooooooooooooooooooooooooooMoMoooM
MooooooooooooooooooooMooooooooooooooooooooooooooMoooooH:
MoooooooMooooooooooooMoooooooooooooooooooooooooooooHoooM
MooooooooMoooooooooooMoooooooooooooooooooooooooMoooMooooM
Moooooooooooooooooooooooooooooooooooooooooooooo.oooMooooo
MoooooooooooooooooooooooooooooooooooooooooooooMoooooooooM
MooooooooooooooooooooMoooooooooooooooooooooooooooooooooM
MooooooooooooooooooooMHooooooooooooooooooooMoooo:ooooo
MMooooooooooooooooooMoMHoooooooooooooooooooooooMooooo
MMoooooooooooooooMMooo MMooooooooooooooooooooooooooM
MMMoooooooooooooMooooo oooooooooooooooooooooMooooo
MooMMoooooooooMoooMMoM ooooHooooooooooooooooMooooM
MooooMooooooMooooMoooM MoooooMoooooooooooooMooooo
ooooooMMooooooooMooooM MoooooooooMooooooooooooooM
HooooooMoooooooMooooM HoooooooHooMooooooooooooo
oooMoooooooooHoooM MoooooooooMoooooooooM
HooooooooooooHM MooooooooMMoooooooM
MMMMMMMMMMMMMM Moooooo:MooooHMM
MMMMMMM: ... MMMMMMMMMMMMMM
M............M MMMMMMMMM ....
M.MM.......... M.............M
M ..............MM M..............
MMMMM............MMMM ..MMMMMMMM ....M
MMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMM...M
.MMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMM
:MMMMMMMMMMMMMMMMMMH MMMMMMMMMMMMMMMMMMM
By EBEN Jérôme MMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMM
HMMMMMM
-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myApp",[])
app.controller("myCtrl",function($scope,$http){
$scope.jsonnet="";
$http({
method:"get",
url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).then(function success(response){
$scope.jsonnet=response.data;
},function error(response){})
//单个删除
$scope.deletenoe=function($index){
$scope.jsonnet.splice($index,1)
alert("删除成功");
}
//模糊搜索
$scope.ordername="";
//排序
$scope.orderkey="";
//删除多个
$scope.ifshow=true;
$scope.deletemore=function($index){
$scope.jsonnet[$index].ch=!$scope.jsonnet[$index].ch;
}
$scope.deleteall=function(){
//删除全部
var v=$scope.ch;
if (v) {
for(var i=$scope.jsonnet.length-1;i>=0;i--){
$scope.jsonnet.splice(i,1);
$scope.ifshow=false;
}
alert("全选删除成功");
}
//批量删除
for(var i=$scope.jsonnet.length-1;i>=0;i--){
if($scope.jsonnet[i].ch){
$scope.jsonnet.splice(i,1);
}
}
alert("批量删除成功");
}
$scope.num="";
$scope.count="";
$scope.ifalert=false;
//点击修改的方法
$scope.alertG=function($index){
$scope.count=$index;
//点击修改显示列表
$scope.ifalert=true;
$scope.num=$scope.jsonnet[$index].score;
}
//修改成功后的值
$scope.succG=function(){
$scope.jsonnet[$scope.count].score=$scope.num;
//修改完成就隐藏修改列表
$scope.ifalert=false;
}
})
</script>
<style>
tr{text-align:center}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<!--电影名称模糊查询-->
<input type="text" placeholder="按电影名称模糊查询" ng-model="ordername" />
<!--排序-->
<select ng-model="orderkey">
<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>
<!--批量删除-->
<input type="button" value="批量删除" ng-click="deleteall()" />
<!--数据展示-->
<table border="1" width="1000px" ng-show="ifshow">
<tr style="background-color: antiquewhite;">
<th><input type="checkbox" ng-model="ch"/></th>
<th>电影名称</th>
<th>时长</th>
<th>导演</th>
<th>售价</th>
<th>上映时间</th>
<th>评分</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in jsonnet | filter:{name:ordername} | orderBy:orderkey ">
<td><input type="checkbox" ng-checked="ch" ng-click="deletemore($index)"/></td>
<td>{{g.name}}</td>
<td>{{g.time}}</td>
<td>{{g.author}}</td>
<td>{{g.price | currency:"￥"}}</td>
<td>{{g.playTime | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{g.score}}</td>
<td>
<input type="button" value="删除" ng-click="deletenoe($index)"/>
<input type="button" value="修改" ng-click="alertG($index)"/>
</td>
</tr>
</table>
<table width="500px" ng-show="ifalert">
<tr>
<th colspan="2">评分修改</th>
</tr>
<tr>
<td>评分</td>
<td><input type="number" ng-model="num" name="num" />
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="确定修改" ng-click="succG()"/></td>
</tr>
</table>
</center>
</body>
</html>