<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<style type="text/css">
.tip{
background-color: yellow;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="gname1"/>
<input type="button" name="" id="" value="搜索" ng-click="search()"/>
<select name="" ng-model="orderKey">
<option value="0">按要求排序</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>
<input type="button" name="" id="" value="批量删除" ng-click="delAll()"/><br />
<input type="button" name="" id="" value="清空购物车" ng-click="clear()"/>
<input type="button" name="" id="" value="添加数据" ng-click="isShow=!isShow"/>
<table border="1" cellspacing="0" cellpadding="0" width="55%">
<tr style="background-color: gray;">
<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>
<tr ng-repeat="x in shops|filter:gname|orderBy:orderKey">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="checkAll"/></td>
<td>{{x.name}}</td>
<td>{{x.type}}</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="modify(x.name)"/>
<input type="button" name="" id="" value="删除" ng-click="del(x.name)"/></td>
</tr>
</table>
<span>售价总和:{{getTotalPrice()|currency:"￥: "}}</span>
<fieldset ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>电影名称:<input type="text" name="" id="" value="" ng-model="aname"/><span id="s_name" class="tip"></span></td>
</tr>
<tr>
<td>类别:<select ng-init="select_mainType=shopsType[0]" ng-model="select_mainType" ng-options="x.mainType for x in shopsType" ng-click="changeType()"></select>
<select ng-init="select_child=select_mainType.childType[0]" ng-model="select_child" ng-options="y for y in select_mainType.childType"></select>
<span id="s_type"></span>
</td>
</tr>
<tr>
<td>
时长:<input type="text" name="" id="" value="" ng-model="atime"/><span id="s_time" class="tip"></span>
</td>
</tr>
<tr>
<td>
导演:<input type="text" name="" id="" value="" ng-model="aauthor"/><span id="s_author" class="tip"></span>
</td>
</tr>
<tr>
<td>
售价:<input type="text" name="" id="" value="" ng-model="aprice"/><span id="s_price" class="tip"></span>
</td>
</tr>
<tr>
<td>
上映时间:<input type="date" name="" id="" value="" ng-model="apaytime"/><span id="s_paytime" class="tip"></span>
</td>
</tr>
<td>
评分:<input type="text" name="" id="" value="" ng-model="ascore"/><span id="s_score" class="tip"></span>
</td>
<tr>
<td>
<input type="button" name="" id="" value="保存" ng-click="save()"/>
</td>
</tr>
</tr>
</table>
</fieldset>
<fieldset ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>电影名称:<input type="text" name="" id="" ng-model="mname" /></td>
</tr>
<tr>
<td>时长:<input type="text" name="" id="" ng-model="mtime" /><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td>导演:<input type="text" name="" id="" ng-model="mauthor" /><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td><input type="button" name="" id="" value="修改保存" ng-click="modifySave()"/></td>
</tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function ($scope,$http) {
$scope.orderKey="0";
$scope.shops=[];
$scope.isShow=false;
$scope.checkAll=false;
$scope.isModifyShow=false;
$scope.shopsType=[{"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
{"mainType":"历史","childType":["历史1","历史2"]},
{"mainType":"科幻","childType":["科幻"]},];
/*$scope.shops=[ {"name":"前任三","type":["喜剧","爱情"],"time":120,"author":"田羽生","price":35.9,"playTime":1511050949001,"score":9.3},
{"name":"速度与激情8","type":["动作","冒险"],"time":145,"author":"格雷","price":45.5,"playTime":1450000949001,"score":9.5},
{"name":"羞羞的铁拳","type":["喜剧","爱情"],"time":135,"author":"宋阳","price":42.5,"playTime":1511000949001,"score":8.6},
{"name":"太空救援","type":["冒险","科幻"],"time":108,"author":"弗拉基米尔","price":38.9,"playTime":1516000949001,"score":9.4} ];*/
$http({
method:"GET",
//url:"newdata.json"
url:"http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1"
}).then(function success(response) {
$scope.shops=response.data;
},function error(response) {
});
$scope.del=function (gname) {
var c=confirm("是否确定删除?");
if(c){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==gname){
$scope.shops.splice(i,1);
break;
}
}
alert("删除成功!");
}else{
}
};
$scope.clear=function () {
$scope.shops=[];
};
$scope.getTotalPrice=function () {
var total=0;
for (var i = 0; i < $scope.shops.length; i++) {
total+=$scope.shops[i].price;
}
return total;
};
$scope.sousu=function () {
$scope.shops[i].gname=$scope.shops[i].gname1;
}
$scope.delAll=function () {
var cheboxs=$("input:checked");
for (var i=cheboxs.length-1;i>=0;i--) {
var ix=cheboxs[i].value;
for (var y = 0; y < $scope.shops.length; y++) {
if($scope.shops[y].name==ix){
$scope.shops.splice(y,1);
break;
}
}
}
}
$scope.search=function () {
$scope.gname=$scope.gname1;
}
$scope.changeType=function () {
$scope.select_child=$scope.select_mainType.childType[0];
}
$scope.save=function () {
$(".tip").html("");
var aname=$scope.aname;
if(aname==null||aname<3||aname.length>10){
$("#s_name").html("电影名称不能为空,且长度在3-10之间");
return;
}
var atime=$scope.atime;
if(atime==null){
$("#s_time").html("时长不能为空");
return;
}
var paytime=$scope.apaytime;
if(paytime==null){
$("#s_paytime").html("上映时间不能为空");
return;
}
var newdata={};
newdata.name=aname;
newdata.time=atime;
newdata.playTime=paytime;
newdata.author=$scope.aauthor;
newdata.price=parseInt($scope.aprice);
newdata.score=$scope.ascore;
var types=[];
types.push($scope.select_mainType.mainType);
types.push($scope.select_child);
newdata.type=types;
$scope.shops.push(newdata);
}
var data="";
$scope.modify=function (fname) {
$scope.isModifyShow=!$scope.isModifyShow;
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==fname){
data=$scope.shops[i];
$scope.mname=data.name;
$scope.mtime=data.time;
$scope.mauthor=data.author;
break;
}
}
}
$scope.modifySave=function () {
data.name=$scope.mname;
data.time=$scope.mtime;
data.author=$scope.mauthor;
$scope.isModifyShow=!$scope.isModifyShow;
}
});
</script>
</body>
</html>
