混合开发之模糊查询 增删改查
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#but{
background-color: #008000;
}
body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}
table tr:hover{background:#73B1E0;color:#FFF;}
table td,table th{border:1px solid #EEE;}
ul{
list-style-type: none;
}
</style>
</head>
<body ng-app="myapp" ng-controller="ctrl">
<center>
<div>
<input type="text" id="input" value="" placeholder="按电影名称模糊查询" ng-model="searchkey"/>
<input type="button" id="" value="搜索" ng-click="sou"/>
<select style="margin-left: 30px;" ng-model="orderkey"><option>--按要求排序--</option>
<option value="fsdate">按上映时间正序排列</option>
<option value="-fdaoyan">按导演倒叙排列</option>
</select>
<input type="button" id="input2" value="批量删除" ng-click="plsc_btn()" />
<input type="button" name="" id="" value="入库" ng-click="isAdd=!isAdd"/>
<div>
</div>
<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>
<tr ng-repeat="x in film|filter:searchkey|orderBy:orderkey">
<td><input type="checkbox" name="" id="" value="" ng-model="checkAll" /></td>
<td>{{x.fname}}</td>
<td>{{x.ftype}}</td>
<td>{{x.fdate}}</td>
<td>{{x.fdaoyan}}</td>
<td>{{x.fmuch|currency:"¥:"}}</td>
<td>{{x.fsdate}}</td>
<td>{{x.fpinfen}}</td>
<td><input type="button" id="" value="删除" ng-click="delgoods(x.fname)"/></td>
</tr>
</tbody>
</table>
<span id="g_totalprice" class="cal">总价是:{{getTotalPrice()|currency:"¥:"}}</span>
<input type="button" id="input_clear" value="清空购物车" ng-click="clearGoods()" />
</div>
<ul ng-show="isAdd">
<li>电影名称<input type="text" id="" value="" ng-model="dname" /></li>
<li> <td><span id="ming_span"></span></td></li>
<li>类别<input type="text" id="" value="" ng-model="dtype"/></li>
<li>时长<input type="text" id="" value="" ng-model="ddate"/></li>
<li>导演<input type="text" id="" value="" ng-model="ddaoyan"/></li>
<li>售价<input type="text" id="" value="" ng-model="dmuch"/></li>
<li>上映时间<input type="text" id="" value="" ng-model="dsdate"/></li>
<li>评分<input type="text" id="" value="" ng-model="dpingfeng"/></li>
<li><input type="button" id="" value="添加" ng-click="saveGoods()"/></li>
</ul>
</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope){
//搜索关键字
$scope.searchkey="";
$scope.film=[
{fname:"前三任",ftype:"喜剧,爱情",fdate:"120分钟",fdaoyan:"田羽生",fmuch:35.9,fsdate:"2017-11-09 08:22:29",fpinfen:9.3},
{fname:"速度与激情8",ftype:"动作,冒险",fdate:"145分钟",fdaoyan:"格雷",fmuch:45.9,fsdate:"2015-03-09 08:10:29",fpinfen:9.5},
{fname:"羞羞的铁拳",ftype:"喜剧,爱情",fdate:"135分钟",fdaoyan:"宋扬",fmuch:38.9,fsdate:"2017-11-28 21:22:29",fpinfen:8.3}
]
$scope.delgoods=function(gname){
var c=confirm("确定要删除吗");
if (c) {//点击了确定按钮
for (var i = 0; i <$scope.film.length; i++) {
if($scope.film[i].fname==gname){
$scope.film.splice(i,1);
break;
}
}
alert("删除成功");
}
}
//计算总价格
$scope.getTotalPrice=function(){
var fmuch=0;
for (var i = 0; i < $scope.film.length; i++) {
fmuch+=($scope.film[i].fmuch*$scope.film[i].fpinfen)
}
return fmuch;
}
$scope.clearGoods=function(){
//清空所有购物车数据
$scope.film=[];
}
$scope.delect_1=function(){
alert("删除")
}
//批量删除状态
$scope.plsc_btn=function(){
var deall=$("input:checked");//选中的删除
for (var i = deall.length-1; i >=0; i--) {
//得到序号--从0开始
var index=deall[i].value;
//进行删除
$scope.film.splice(index,1);
}
}
$scope.saveGoods=function(){
var newsfilm={};
newsfilm.fname=$scope.dname;
newsfilm.ftype=$scope.dtype;
newsfilm.fdate=$scope.ddate;
newsfilm.fdaoyan=$scope.ddaoyan;
newsfilm.fmuch=$scope.dmuch;
newsfilm.fsdate=$scope.dsdate;
newsfilm.fpinfen=$scope.dpingfeng;
//进行添加
$scope.film.push(newsfilm);
}
var ming=$scope.dname;
if (ming=="") {
$("#ming_span").html("商品名不能为空");
return;
} else{
$("#ming_span").html("");
}
});
</script>
</body>
</html>