<!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">
select {
width: 220px;
height: 23px;
}
table {
width: 70%;
margin-top: 10px;
}
#div1 {
width: 70%;
margin: 0 auto;
}
#btn2{
float: right;
}
#btn1{
margin-left: 15px;
padding: 0;
height: 22px;
margin-right: 15px;
}
#btn3{
margin-left: 15px;
margin-right: 15px;
height: 22px;
padding: 0;
}
#ji{
margin-left: 20px;
margin-right: 20px;
}
#fi1{
width: 70%;
margin-left: 160px;
}
#sele1{
width: 78px;
}
.tip{
color: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div id="div1">
<input type="text" name="" id="id1" value="" placeholder="按电影名称模糊查询" ng-model="str" />
<input type="button" name="" id="btn1" value="搜索" ng-click="chaxun_()" />
<select name=""id="selebtn" ng-model="select_">
<option value="0">--按要求排序--</option>
<option value="shichang">时长正序</option>
<option value="-shichang">时长倒叙</option>
<option value="price">售价正序</option>
<option value="-price">售价倒叙</option>
<option value="pingfen">评分正序</option>
<option value="-pingfen">评分倒叙</option>
<option value="shijian">时间正序</option>
<option value="-shijian">时间倒叙</option>
</select>
<span id="ji">总计：￥{{addllTao()}}</span>
<input type="button" name="" id="" value="添加" ng-click="isShow1=!isShow1"/>
<input type="button" name="" id="btn2" value="批量删除" ng-click="del_()" />
</div>
<center>
<table border="1" cellspacing="0" cellpadding="0" style="text-align: center;" ng-show="isShow">
<thead>
<tr>
<th><input type="checkbox" name="" id="" value=""ng-model="checkll" /></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 addll|orderBy:select_|filter:strs">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="checkll"/></td>
<td>{{x.name}}</td>
<td>{{x.qingjie[0]+","+x.qingjie[1]}}</td>
<td>{{x.shichang}}</td>
<td>{{x.names}}</td>
<td>{{x.price|currency:"￥"}}</td>
<td>{{x.shijian|date:"yyyy-MM-dd"}}</td>
<td>{{x.pingfen}}</td>
<td><input type="button" name="" id="" value="删除" ng-click="del_2(x.name)" /></td>
</tr>
</tbody>
</table>
</center>
<fieldset ng-show="isShow1" id="fi1">
<legend>添加数据</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>电影名称:</td>
<td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="aname_"class="tip"></span></td>
</tr>
<tr>
<td>类别:</td>
<!--//省-->
<td><select ng-init="erji_sheng=filmsType[0]"
ng-model="erji_sheng"
ng-options="x.aa1 for x in filmsType"
ng-click="click_sheng()"
id="sele1">
</select>
<!--//市-->
<select ng-init="erji_shi=erji_sheng.aa2[0]"
ng-model="erji_shi"
ng-options="y for y in erji_sheng.aa2"
id="sele1">
</select>
</td>
<td><span id="aqingjie_"class="tip"></span></td>
</tr>
<tr>
<td>时长:</td>
<td><input type="text" name="" id="" value="" ng-model="ashichang" /></td>
<td><span id="ashichang_"class="tip"></span></td>
</tr>
<tr>
<td>导演:</td>
<td><input type="text" name="" id="" value="" ng-model="anames" /></td>
<td><span id="anames_"class="tip"></span></td>
</tr>
<tr>
<td>售价:</td>
<td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="aprice_"class="tip"></span></td>
</tr>
<tr>
<td>上映时间:</td>
<td><input type="date" name="" id="" value="" ng-model="ashijian" /></td>
<td><span id="ashijian_"class="tip"></span></td>
</tr>
<tr>
<td>评分:</td>
<td><input type="text" name="" id="" value="" ng-model="apingfen" /></td>
<td><span id="apingfen_" class="tip"></span></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" id="" value="添加信息" ng-click="insert_1()" /></td>
</tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//定显示默认
$scope.select_="0";
$scope.isShow=true;
$scope.isShow1=false;
$scope.checkll=false;
//定义类型二级
$scope.filmsType=[
{"aa1":"喜剧","aa2":["喜剧1","喜剧2"]},
{"aa1":"历史","aa2":["历史1","历史2","历史3"]},
{"aa1":"科幻","aa2":["科幻1"]}];
//点击省+变换市
$scope.click_sheng=function(){
$scope.erji_shi=$scope.erji_sheng.aa2[0];
}
//定义数组
$scope.addll=[
{name:"前任三",qingjie:["喜剧", "爱情"],shichang:120,names:"田羽生",price:35,shijian:"2017-11-19",pingfen:9.3},
{name:"速度与激情",qingjie:["冒险", "动作"],shichang:146,names:"格雷",price:60,shijian:"2017-12-22",pingfen:9.5},
{name:"羞羞的铁拳",qingjie:["喜剧", "爱情"],shichang:118,names:"松阳",price:45,shijian:"2017-11-23",pingfen:9.0},
{name:"太空救援",qingjie:["科幻", "灾难"],shichang:106,names:"田羽生",price:45,shijian:"2017-11-30",pingfen:8.6},];
//点击删除
$scope.del_2=function(name_123){
for (var i = 0; i < $scope.addll.length; i++) {
if ($scope.addll[i].name==name_123) {
$scope.addll.splice(i,1);
break;
}
}
}
//点击批量删除
$scope.del_=function(){
var aaa=$("input:checked");//选中的删除
for (var i = 0; i < aaa.length; i++) {
var check_name=aaa[i].value;
for (var j = 0; j < $scope.addll.length; j++) {
if ($scope.addll[j].name==check_name) {
$scope.addll.splice(j,1);
break;
}
}
}
}
//点击搜索
$scope.chaxun_=function(){
var s=$scope.str;
$scope.strs=s;
if (s==null) {
$scope.isShow=true;
}
}
//总价钱
$scope.addllTao=function(){
var lxl=0;
for (var i = 0; i < $scope.addll.length; i++) {
lxl+=$scope.addll[i].price;
}
return lxl;
}
//点击验证添加页面
$scope.insert_1=function(){
//清空span标签
$(".tip").html("");
//进行判断
var aname=$scope.aname;
if (aname==null || aname.length<3 || aname.length>10) {
$("#aname_").html("不能为空，在3~10之间");
return;
}
var ashichang=$scope.ashichang;
if (ashichang==null||ashichang>160) {
$("#ashichang_").html("时长不能为空，在160之间");
return;
}
var anames=$scope.anames;
if (anames==null) {
$("#anames_").html("导演不能为空");
return;
}
var aprice=$scope.aprice;
if (aprice==null) {
$("#aprice_").html("售价不能为空");
return;
}
var ashijian=$scope.ashijian;
if (ashijian==null) {
$("#ashijian_").html("上映时间不能为空");
return;
}
var apingfen=$scope.apingfen;
if (apingfen==null) {
$("#apingfen_").html("评分不为空");
return;
}
var sheng_shi={};
sheng_shi.name=$scope.aname;
sheng_shi.shichang=$scope.ashichang;
sheng_shi.names=$scope.anames;
sheng_shi.price=parseInt($scope.aprice);
sheng_shi.shijian= $scope.ashijian;
sheng_shi.pingfen=$scope.apingfen;
//得到类型
var types=[];
types.push($scope.erji_sheng.aa1);
types.push($scope.erji_shi);
sheng_shi.qingjie=types;
$scope.addll.push(sheng_shi);
}
})
</script>
</body>
</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">
select {
width: 220px;
height: 23px;
}
table {
width: 70%;
margin-top: 10px;
}
#div1 {
width: 70%;
margin: 0 auto;
}
#btn2{
float: right;
}
#btn1{
margin-left: 15px;
padding: 0;
height: 22px;
margin-right: 15px;
}
#btn3{
margin-left: 15px;
margin-right: 15px;
height: 22px;
padding: 0;
}
#ji{
margin-left: 20px;
margin-right: 20px;
}
#fi1{
width: 70%;
margin-left: 160px;
}
#sele1{
width: 78px;
}
.tip{
color: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div id="div1">
<input type="text" name="" id="id1" value="" placeholder="按电影名称模糊查询" ng-model="str" />
<input type="button" name="" id="btn1" value="搜索" ng-click="chaxun_()" />
<select name=""id="selebtn" ng-model="select_">
<option value="0">--按要求排序--</option>
<option value="shichang">时长正序</option>
<option value="-shichang">时长倒叙</option>
<option value="price">售价正序</option>
<option value="-price">售价倒叙</option>
<option value="pingfen">评分正序</option>
<option value="-pingfen">评分倒叙</option>
<option value="shijian">时间正序</option>
<option value="-shijian">时间倒叙</option>
</select>
<span id="ji">总计：￥{{addllTao()}}</span>
<input type="button" name="" id="" value="添加" ng-click="isShow1=!isShow1"/>
<input type="button" name="" id="btn2" value="批量删除" ng-click="del_()" />
</div>
<center>
<table border="1" cellspacing="0" cellpadding="0" style="text-align: center;" ng-show="isShow">
<thead>
<tr>
<th><input type="checkbox" name="" id="" value=""ng-model="checkll" /></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 addll|orderBy:select_|filter:strs">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="checkll"/></td>
<td>{{x.name}}</td>
<td>{{x.qingjie[0]+","+x.qingjie[1]}}</td>
<td>{{x.shichang}}</td>
<td>{{x.names}}</td>
<td>{{x.price|currency:"￥"}}</td>
<td>{{x.shijian|date:"yyyy-MM-dd"}}</td>
<td>{{x.pingfen}}</td>
<td><input type="button" name="" id="" value="删除" ng-click="del_2(x.name)" /></td>
</tr>
</tbody>
</table>
</center>
<fieldset ng-show="isShow1" id="fi1">
<legend>添加数据</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>电影名称:</td>
<td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="aname_"class="tip"></span></td>
</tr>
<tr>
<td>类别:</td>
<!--//省-->
<td><select ng-init="erji_sheng=filmsType[0]"
ng-model="erji_sheng"
ng-options="x.aa1 for x in filmsType"
ng-click="click_sheng()"
id="sele1">
</select>
<!--//市-->
<select ng-init="erji_shi=erji_sheng.aa2[0]"
ng-model="erji_shi"
ng-options="y for y in erji_sheng.aa2"
id="sele1">
</select>
</td>
<td><span id="aqingjie_"class="tip"></span></td>
</tr>
<tr>
<td>时长:</td>
<td><input type="text" name="" id="" value="" ng-model="ashichang" /></td>
<td><span id="ashichang_"class="tip"></span></td>
</tr>
<tr>
<td>导演:</td>
<td><input type="text" name="" id="" value="" ng-model="anames" /></td>
<td><span id="anames_"class="tip"></span></td>
</tr>
<tr>
<td>售价:</td>
<td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="aprice_"class="tip"></span></td>
</tr>
<tr>
<td>上映时间:</td>
<td><input type="date" name="" id="" value="" ng-model="ashijian" /></td>
<td><span id="ashijian_"class="tip"></span></td>
</tr>
<tr>
<td>评分:</td>
<td><input type="text" name="" id="" value="" ng-model="apingfen" /></td>
<td><span id="apingfen_" class="tip"></span></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" id="" value="添加信息" ng-click="insert_1()" /></td>
</tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//定显示默认
$scope.select_="0";
$scope.isShow=true;
$scope.isShow1=false;
$scope.checkll=false;
//定义类型二级
$scope.filmsType=[
{"aa1":"喜剧","aa2":["喜剧1","喜剧2"]},
{"aa1":"历史","aa2":["历史1","历史2","历史3"]},
{"aa1":"科幻","aa2":["科幻1"]}];
//点击省+变换市
$scope.click_sheng=function(){
$scope.erji_shi=$scope.erji_sheng.aa2[0];
}
//定义数组
$scope.addll=[
{name:"前任三",qingjie:["喜剧", "爱情"],shichang:120,names:"田羽生",price:35,shijian:"2017-11-19",pingfen:9.3},
{name:"速度与激情",qingjie:["冒险", "动作"],shichang:146,names:"格雷",price:60,shijian:"2017-12-22",pingfen:9.5},
{name:"羞羞的铁拳",qingjie:["喜剧", "爱情"],shichang:118,names:"松阳",price:45,shijian:"2017-11-23",pingfen:9.0},
{name:"太空救援",qingjie:["科幻", "灾难"],shichang:106,names:"田羽生",price:45,shijian:"2017-11-30",pingfen:8.6},];
//点击删除
$scope.del_2=function(name_123){
for (var i = 0; i < $scope.addll.length; i++) {
if ($scope.addll[i].name==name_123) {
$scope.addll.splice(i,1);
break;
}
}
}
//点击批量删除
$scope.del_=function(){
var aaa=$("input:checked");//选中的删除
for (var i = 0; i < aaa.length; i++) {
var check_name=aaa[i].value;
for (var j = 0; j < $scope.addll.length; j++) {
if ($scope.addll[j].name==check_name) {
$scope.addll.splice(j,1);
break;
}
}
}
}
//点击搜索
$scope.chaxun_=function(){
var s=$scope.str;
$scope.strs=s;
if (s==null) {
$scope.isShow=true;
}
}
//总价钱
$scope.addllTao=function(){
var lxl=0;
for (var i = 0; i < $scope.addll.length; i++) {
lxl+=$scope.addll[i].price;
}
return lxl;
}
//点击验证添加页面
$scope.insert_1=function(){
//清空span标签
$(".tip").html("");
//进行判断
var aname=$scope.aname;
if (aname==null || aname.length<3 || aname.length>10) {
$("#aname_").html("不能为空，在3~10之间");
return;
}
var ashichang=$scope.ashichang;
if (ashichang==null||ashichang>160) {
$("#ashichang_").html("时长不能为空，在160之间");
return;
}
var anames=$scope.anames;
if (anames==null) {
$("#anames_").html("导演不能为空");
return;
}
var aprice=$scope.aprice;
if (aprice==null) {
$("#aprice_").html("售价不能为空");
return;
}
var ashijian=$scope.ashijian;
if (ashijian==null) {
$("#ashijian_").html("上映时间不能为空");
return;
}
var apingfen=$scope.apingfen;
if (apingfen==null) {
$("#apingfen_").html("评分不为空");
return;
}
var sheng_shi={};
sheng_shi.name=$scope.aname;
sheng_shi.shichang=$scope.ashichang;
sheng_shi.names=$scope.anames;
sheng_shi.price=parseInt($scope.aprice);
sheng_shi.shijian= $scope.ashijian;
sheng_shi.pingfen=$scope.apingfen;
//得到类型
var types=[];
types.push($scope.erji_sheng.aa1);
types.push($scope.erji_shi);
sheng_shi.qingjie=types;
$scope.addll.push(sheng_shi);
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
