CSS
.main{
width: 60%;
margin: 0 auto;
background-color: aliceblue;
text-align: center;
}
table{
margin: 0 auto;
width: 80%;
}
thead tr{
background-color: #696969;
}
#hs tr:nth-child(even){
background-color: aqua;
}
#hs tr:nth-child(odd){
background-color: #7FFF00;
}
.xiugai{
width: 40%;
margin: 10px auto;
border: 2px solid black;
}
#cun{
width: 95%;
}
.bcolocr{
background-color: yellow;
color: red;
}
.add{
margin-top: 10px;
width: 60%;
align-self: ;
text-align: left;
}
页面
<!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-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div class="main">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="seacherKey"/>
<input type="button" name="" id="" value="搜索" ng-click="SouSuo()"/>
<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" name="" id="" value="批量删除" ng-click="delMore()"/>
<input type="button" name="" id="" value="清空列表" ng-click="clearAll()"/>
<input type="button" name="" id="" value="添加数据" ng-click="AddData()"/>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><input type="checkbox" name="" id="" value="" ng-model="checkAll"/></th>
<th>电影名称</th>
<th>类别</th>
<th>时长</th>
<th>导演</th>
<th>售价</th>
<th>上映时间</th>
<th>评分</th>
<th>操作</th>
</tr>
</thead>
<tbody id="hs">
<tr ng-repeat="x in fiml|filter:{name:seacherKey}|orderBy:orderKey">
<td><input type="checkbox" name="" id="" value="" ng-model="checkAll" ng-click=""/></td>
<td>{{x.name}}</td>
<td>{{x.type[0]+","+x.type[1]}}</td>
<td>{{x.time}}</td>
<td>{{x.author}}</td>
<td>{{x.price|currency:"￥："}}</td>
<td>{{x.playTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{x.score}}</td>
<td>
<input type="button" name="" id="" value="修改" ng-click="upData(x.name)"/>
<input type="button" name="" id="" value="删除" ng-click="delFiml(x.name)"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9"><span>商品总价:{{Zjia()|currency:"￥："}}</span></td>
</tr>
</tfoot>
</table>
<div class="xiugai" ng-hide="hide">
<h2>评分修改</h2>
评分 <input type="text" name="" id="" value="" ng-model="Gai"/><br />
<input type="button" name="" id="cun" value="确定保存" ng-click="baocun(x.name)"/>
</div>
<fieldset ng-hide="isHide">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0" class="add">
<tr>
<td align="right">电影名称</td>
<td><input type="text" ng-model="s_name"/></td>
<td><span id="s_name" class="bcolocr">
</span></td>
</tr>
<tr>
<td align="right">类别</td>
<td>
<select ng-init="select_film=LianDong[0]" ng-model="select_film" ng-options="x.filmType for x in LianDong"
ng-click="changeType()">
</select>
<select ng-init="select_child=select_film.childType[0]" ng-model="select_child" ng-options="y for y in select_film.childType">
</select>
</td>
<td><span id="s_type" class="bcolocr">
</span></td>
</tr>
<tr>
<td align="right">时长</td>
<td><input type="text" name="" id="" value="" ng-model="s_time"/></td>
<td><span id="s_time" class="bcolocr">
</span></td>
</tr>
<tr>
<td align="right">导演</td>
<td><input type="text" name="" id="" value="" ng-model="s_author"/></td>
<td><span id="s_author" class="bcolocr">
</span></td>
</tr>
<tr>
<td align="right">售价</td>
<td><input type="text" name="" id="" value="" ng-model="s_price"/></td>
<td><span id="s_price" class="bcolocr">
</span></td>
</tr>
<tr>
<td align="right">上映时间</td>
<td><input type="date" name="" id="" value="" ng-model="s_playtime"/></td>
<td><span id="s_playtime" class="bcolocr">
</span></td>
</tr>
<tr>
<td align="right">评分</td>
<td><input type="text" name="" id="" value="" ng-model="s_score"/></td>
<td><span id="s_score" class="bcolocr">
</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="" id="" value="保存" ng-click="save()"/></td>
</tr>
</table>
</fieldset>
</div>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
//网络请求数据
$http({
method:"GET",
//
url:"http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1"})
.then(function as(resp){
$scope.film=resp.data;
},function error(resp){
});
//初始化
$scope.hide=true;
$scope.isHide=true;
//设置排序关键字
$scope.orderKey="1";
//设置查询关键字
$scope.seacherKey="";
//批量删除
$scope.delMore=function(){
var delmore=$("input[type=checkbox]:checked")
for (var i = delmore.length-1;i>=0; i--) {
$scope.fiml.splice(delmore[i].value,1);
}
}
//二级联动
$scope.LianDong=[
{"filmType":"欧美","childType":["悬疑","动作","谍战"]},
{"filmType":"日韩","childType":["惊悚","11","1作","谍战1"]},
{"filmType":"国产","childType":["喜剧","悬疑2","动作2","谍战2"]}];
$scope.changeType=function(){
$scope.select_child=$scope.select_film.childType[0];
}
//添加数据
$scope.AddData=function(){
$scope.isHide=false;
}
//非空判断
$scope.save=function(){
$(".bcolor").html("");
//电影名
var vname=$scope.s_name;
//电影类型
var vtype=$scope.s_type;
//时长
var vtime=$scope.s_time;
//导演
var vauthor=$scope.s_author;
//售价
var vprice=$scope.s_price;
//上映时间
var vplaytime=$scope.s_playtime;
//评分
var vscore=$scope.s_score;
if(vname==null){
$("#s_name").html("电影名不能为空!");
return;
}
if(vtime==null){
$("#s_time").html("时间不能为空！");
}
if(vauthor==null){
$("#s_author").html("导演名不能为空！");
}
if(vprice==null){
$("#s_price").html("售价不能为空！");
}
if(vplaytime==null){
$("#s_paytime").html("上映时间不能为空！");
}
if(vscore==null){
$("#s_score").html("评分不能为空！");
}
var newfilm={};
newfilm.name=vname;
newfilm.time=vtime;
newfilm.author=vauthor;
newfilm.price=parseInt(vprice);
newfilm.playTime=vplaytime;
newfilm.score=vscore;
var newtypes=[];
newtypes.push($scope.select_film.filmType);
newtypes.push($scope.select_child);
newfilm.type=newtypes;
$scope.fiml.push(newfilm);
$scope.isHide=true;
}
//删除单行
$scope.delFiml=function(obj){
for (var i = 0; i < $scope.fiml.length; i++) {
if ($scope.fiml[i].name==obj) {
$scope.fiml.splice(i,1);
break;
}
}
}
//获取总价
$scope.Zjia=function(){
var allPrice=0;
for (var i = 0; i < $scope.fiml.length; i++) {
allPrice+=$scope.fiml[i].price;
}
return allPrice;
}
//修改
$scope.upData=function(obj){
$scope.hide=false;
for (var i = 0; i < $scope.fiml.length; i++) {
if($scope.fiml[i].name=obj){
dogai=$scope.fiml[i];
break;
}
}
$scope.Gai=dogai.score;
}
//保存修改
$scope.baocun=function(obj){
dogai.score=$scope.Gai;
$scope.hide=true;
}
//清空列表
$scope.clearAll=function(){
$scope.fiml=[];
}
//添加数据集合
$scope.fiml=[
{"price":35.9,"author":"田羽生","time":120,"type":["喜剧","爱情"],"id":1,"name":"前任三","playTime":1511050949001,"score":9.3},
{"price":45.5,"author":"格雷","time":145,"type":["动作","冒险"],"id":2,"name":"速度与激情8","playTime":1450000949001,"score":9.5},
{"price":42.5,"author":"宋阳","time":135,"type":["喜剧","爱情"],"id":3,"name":"羞羞的铁拳","playTime":1511000949001,"score":8.6},
{"price":38.9,"author":"弗拉基米尔","time":108,"type":["冒险","科幻"],"id":4,"name":"太空救援","playTime":1516000949001,"score":9.4}];
});
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
