<!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>
<style type="text/css">
thead {
background: gray;
}
.tip {
background: yellow;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="skey" />
<input type="button" 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" id="" value="批量删除" ng-click="delAll()" />
<input type="button" id="" value="清空所有数据" ng-click="clearAll()" />
<input type="button" id="" value="添加数据" ng-click="isShow=!isShow" />
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead>
<tr>
<th><input type="checkbox" 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>
<tr ng-repeat="x in films|filter:searchKey|orderBy:orderKey">
<td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></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" id="" value="修改" ng-click="modify(x.name)" />
<input type="button" id="" value="删除" ng-click="delfilm(x.name)" />
</td>
</tr>
</tbody>
</table>
<div>总价是：{{getTotal()|currency:"￥："}}</div>
<fieldset id="" ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">电影名称：</td>
<td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr>
<td align="right">类别：</td>
<td>
<select ng-init="select_maintype=filmType[0]" ng-model="select_maintype" ng-options="x.maintype for x in filmType" ng-change="changeType()">
</select>
<select ng-init="select_child=select_maintype.child[0]" ng-model="select_child" ng-options="y for y in select_maintype.child">
</select>
</td>
<td><span id="s_type" class="tip"></span></td>
</tr>
<tr>
<td align="right">时长：</td>
<td><input type="text" name="" id="" value="" ng-model="atime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td align="right">导演：</td>
<td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td align="right">售价：</td>
<td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr>
<td align="right">上映时间：</td>
<td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
<td><span id="s_paytime" class="tip"></span></td>
</tr>
<tr>
<td align="right">评分：</td>
<td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()" /></td>
</tr>
</table>
</fieldset>
<fieldset id="" ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">电影名称：</td>
<td><input type="text" name="" id="" value="" ng-model="mname" /></td>
</tr>
<tr>
<td align="right">时长：</td>
<td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td align="right">导演：</td>
<td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" 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.checkAll = false;
//进行初使化
$scope.films = [];
$scope.isShow = false;
$scope.filmType = [{
"maintype": "喜剧",
"child": ["喜剧1", "喜剧2"]
},
{
"maintype": "冒险",
"child": ["冒险1", "冒险2", "冒险3"]
},
{
"maintype": "幻想",
"child": ["幻想1", "幻想2"]
}
];
//请求网络数据
$http({
method: "GET",
//url:"json/filmdata.json"
url: "http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1"
}).then(function success(response) {
$scope.films = response.data;
}, function error(response) {
});
//查询
$scope.search = function() {
$scope.searchKey = $scope.skey;
}
//得到总价
$scope.getTotal = function() {
var totalPrice = 0;
for(var i = 0; i < $scope.films.length; i++) {
totalPrice += $scope.films[i].price;
}
return totalPrice;
}
//删除数据
$scope.delfilm = function(fname) {
for(var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name == fname) {
$scope.films.splice(i, 1);
break;
}
}
}
//清除所有数据
$scope.clearAll = function() {
$scope.films = [];
}
//批量删除
$scope.delAll = function() {
//选出所有选中的checkbox
var checks = $("input:checked");
for(var i = 0; i < checks.length; i++) {
var vname = checks[i].value;
// alert(vname);
for(var j = 0; j < $scope.films.length; j++) {
if($scope.films[j].name == vname) {
$scope.films.splice(j, 1);
break;
}
}
}
}
$scope.save = function() {
//清空所有错误提示数据
$(".tip").html("");
//电影名称
var aname = $scope.aname;
//时长
var atime = $scope.atime;
//导演
var aauthor = $scope.aauthor;
//售价
var aprice = $scope.aprice;
//上映时间
var apaytime = $scope.apaytime;
//评分
var ascore = $scope.ascore;
if(aname == null || aname.length < 3 || aname.length > 10) {
$("#s_name").html("电影名称不能为空且长度在3位到10位之间");
return;
}
if(atime == null) {
$("#s_time").html("时长不能为空");
return;
}
if(aauthor == null) {
$("#s_author").html("导演不能为空");
return;
}
if(aprice == null) {
$("#s_price").html("售价不能为空");
return;
}
if(apaytime == null) {
$("#s_paytime").html("上映时间不能为空");
return;
}
if(ascore == null) {
$("#s_score").html("评分不能为空");
return;
}
var newfilm = {};
newfilm.name = aname;
newfilm.time = atime;
newfilm.author = aauthor;
newfilm.price = aprice;
newfilm.playTime = apaytime;
newfilm.score = ascore;
var newtypes = [];
newtypes.push($scope.select_maintype.maintype);
newtypes.push($scope.select_child);
newfilm.type = newtypes;
//进行添加
$scope.films.push(newfilm);
$scope.isShow = !$scope.isShow;
}
//切换类型
$scope.changeType = function() {
$scope.select_child = $scope.select_maintype.child[0];
}
var mdata = "";
//修改
$scope.modify = function(fname) {
$scope.isModifyShow = !$scope.isModifyShow;
for(var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name == fname) {
mdata = $scope.films[i];
$scope.mname = mdata.name;
$scope.mtime = mdata.time;
$scope.mauthor = mdata.author;
break;
}
}
}
//修改保存
$scope.modifySave = function() {
mdata.name = $scope.mname;
mdata.time = $scope.mtime;
mdata.author = $scope.mauthor;
$scope.isModifyShow = !$scope.isModifyShow;
}
});
</script>
</body>
<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>
<style type="text/css">
thead {
background: gray;
}
.tip {
background: yellow;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="skey" />
<input type="button" 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" id="" value="批量删除" ng-click="delAll()" />
<input type="button" id="" value="清空所有数据" ng-click="clearAll()" />
<input type="button" id="" value="添加数据" ng-click="isShow=!isShow" />
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead>
<tr>
<th><input type="checkbox" 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>
<tr ng-repeat="x in films|filter:searchKey|orderBy:orderKey">
<td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></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" id="" value="修改" ng-click="modify(x.name)" />
<input type="button" id="" value="删除" ng-click="delfilm(x.name)" />
</td>
</tr>
</tbody>
</table>
<div>总价是：{{getTotal()|currency:"￥："}}</div>
<fieldset id="" ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">电影名称：</td>
<td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr>
<td align="right">类别：</td>
<td>
<select ng-init="select_maintype=filmType[0]" ng-model="select_maintype" ng-options="x.maintype for x in filmType" ng-change="changeType()">
</select>
<select ng-init="select_child=select_maintype.child[0]" ng-model="select_child" ng-options="y for y in select_maintype.child">
</select>
</td>
<td><span id="s_type" class="tip"></span></td>
</tr>
<tr>
<td align="right">时长：</td>
<td><input type="text" name="" id="" value="" ng-model="atime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td align="right">导演：</td>
<td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td align="right">售价：</td>
<td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr>
<td align="right">上映时间：</td>
<td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
<td><span id="s_paytime" class="tip"></span></td>
</tr>
<tr>
<td align="right">评分：</td>
<td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()" /></td>
</tr>
</table>
</fieldset>
<fieldset id="" ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">电影名称：</td>
<td><input type="text" name="" id="" value="" ng-model="mname" /></td>
</tr>
<tr>
<td align="right">时长：</td>
<td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td align="right">导演：</td>
<td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" 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.checkAll = false;
//进行初使化
$scope.films = [];
$scope.isShow = false;
$scope.filmType = [{
"maintype": "喜剧",
"child": ["喜剧1", "喜剧2"]
},
{
"maintype": "冒险",
"child": ["冒险1", "冒险2", "冒险3"]
},
{
"maintype": "幻想",
"child": ["幻想1", "幻想2"]
}
];
//请求网络数据
$http({
method: "GET",
//url:"json/filmdata.json"
url: "http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1"
}).then(function success(response) {
$scope.films = response.data;
}, function error(response) {
});
//查询
$scope.search = function() {
$scope.searchKey = $scope.skey;
}
//得到总价
$scope.getTotal = function() {
var totalPrice = 0;
for(var i = 0; i < $scope.films.length; i++) {
totalPrice += $scope.films[i].price;
}
return totalPrice;
}
//删除数据
$scope.delfilm = function(fname) {
for(var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name == fname) {
$scope.films.splice(i, 1);
break;
}
}
}
//清除所有数据
$scope.clearAll = function() {
$scope.films = [];
}
//批量删除
$scope.delAll = function() {
//选出所有选中的checkbox
var checks = $("input:checked");
for(var i = 0; i < checks.length; i++) {
var vname = checks[i].value;
// alert(vname);
for(var j = 0; j < $scope.films.length; j++) {
if($scope.films[j].name == vname) {
$scope.films.splice(j, 1);
break;
}
}
}
}
$scope.save = function() {
//清空所有错误提示数据
$(".tip").html("");
//电影名称
var aname = $scope.aname;
//时长
var atime = $scope.atime;
//导演
var aauthor = $scope.aauthor;
//售价
var aprice = $scope.aprice;
//上映时间
var apaytime = $scope.apaytime;
//评分
var ascore = $scope.ascore;
if(aname == null || aname.length < 3 || aname.length > 10) {
$("#s_name").html("电影名称不能为空且长度在3位到10位之间");
return;
}
if(atime == null) {
$("#s_time").html("时长不能为空");
return;
}
if(aauthor == null) {
$("#s_author").html("导演不能为空");
return;
}
if(aprice == null) {
$("#s_price").html("售价不能为空");
return;
}
if(apaytime == null) {
$("#s_paytime").html("上映时间不能为空");
return;
}
if(ascore == null) {
$("#s_score").html("评分不能为空");
return;
}
var newfilm = {};
newfilm.name = aname;
newfilm.time = atime;
newfilm.author = aauthor;
newfilm.price = aprice;
newfilm.playTime = apaytime;
newfilm.score = ascore;
var newtypes = [];
newtypes.push($scope.select_maintype.maintype);
newtypes.push($scope.select_child);
newfilm.type = newtypes;
//进行添加
$scope.films.push(newfilm);
$scope.isShow = !$scope.isShow;
}
//切换类型
$scope.changeType = function() {
$scope.select_child = $scope.select_maintype.child[0];
}
var mdata = "";
//修改
$scope.modify = function(fname) {
$scope.isModifyShow = !$scope.isModifyShow;
for(var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name == fname) {
mdata = $scope.films[i];
$scope.mname = mdata.name;
$scope.mtime = mdata.time;
$scope.mauthor = mdata.author;
break;
}
}
}
//修改保存
$scope.modifySave = function() {
mdata.name = $scope.mname;
mdata.time = $scope.mtime;
mdata.author = $scope.mauthor;
$scope.isModifyShow = !$scope.isModifyShow;
}
});
</script>
</body>
</html>
