<!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;}
<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>
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>