<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtr",function ($scope,$http) {
$scope.arr=["--按要求排序--","电影时长正序","电影时长倒序","售价正序","售价倒序","上映时间正序","上映时间倒序"];
/*获取数据*/
$http.get("moni1.json").then(function (success) {
$scope.info=success.data;
})
/*全选全不选*/
$scope.qx=function () {
for (var i = 0; i < $scope.info.length; i++) {
$scope.info[i].check=$scope.iscks;
}
}
/*模糊查询*/
$scope.sou=function () {
$scope.str2=$scope.str1;
}
/*批量删除*/
$scope.delAll=function () {
for (var i = 0; i < $scope.info.length; i++) {
if ($scope.info[i].check) {
$scope.info.splice(i,1);
i--;
} else{
alert("请选择您要删除的数据");
break;
}
}
$scope.iscks=false;
}
/*排序*/
$scope.change=function () {
/*首先获取需要排序的字段*/
var value=$scope.selectValue;
switch (value){
case "电影时长正序":
$scope.info.sort(function (a,b) {
return a.time-b.time;
})
break;
case "电影时长倒序":
$scope.info.sort(function (a,b) {
return b.time-a.time;
})
break;
case "售价正序":
$scope.info.sort(function (a,b) {
return a.price-b.price;
})
break;
case "售价倒序":
$scope.info.sort(function (a,b) {
return b.price-a.price;
})
break;
case "上映时间正序":
$scope.info.sort(function (a,b) {
return a.playTime-b.playTime;
})
break;
case "上映时间倒序":
$scope.info.sort(function (a,b) {
return b.playTime-a.playTime;
})
break;
default:
break;
}
}
/*删除*/
$scope.del=function (index) {
if (confirm("你确定要删除吗?")) {
$scope.info.splice(index,1);
alert("删除成功");
}
}
/*修改*/
$scope.upd=function (index) {
var a=prompt("修改评分",$scope.info[index].score);
$scope.info[index].score=a;
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtr">
<input type="text" placeholder="按电影名称模糊查询" ng-model="str1" style="border-radius: 6px;" />
<button ng-click="sou()">搜索</button>
<select ng-model="selectValue" ng-options="s for s in arr" ng-init="selectValue=arr[0]" ng-change="change()">{{s}}</select>
<button ng-click="delAll()">批量删除</button>
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<tr>
<td>
<input type="checkbox" ng-click="qx()" ng-model="iscks" />
</td>
<td>电影名称</td>
<td>类别</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in info|filter:{'name':str2}">
<td>
<input type="checkbox" ng-model="s.check" />
</td>
<td>{{s.name}}</td>
<td>{{s.type}}</td>
<td>{{s.time}}分钟</td>
<td>{{s.author}}</td>
<td>{{s.price|currency:"¥:"}}</td>
<td>{{s.playTime|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{s.score}}</td>
<td>
<button ng-click="upd($index)">修改</button>
<button ng-click="del($index)">删除</button>
</td>
</tr>
</table>
</body>
</html>
如何实现增删改查二
最新推荐文章于 2022-11-18 14:17:39 发布