添加批量删除二级联动②
2018-04-05 16:45
253 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" charset="UTF-8"></script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<input type="text" placeholder="根据名称模糊查询" ng-model="searchKey"/>
<input type="button" value="清空" ng-click="clearMovie()"/>
<input type="button" value="批量删除" ng-click="clearAll()" />
<input type="button" value="添加" ng-click="isShow=!isShow"/>
<select ng-model="order">
<option value="0">按要求排序</option>
<option value="time">时长升序排列</option>
<option value="-time">时长降序排列</option>
</select>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> <input type="checkbox" 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 movies|filter:{name:searchKey}|orderBy:order">
<td> <input type="checkbox" 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}}</td>
<td>{{x.playTime}}</td>
<td>{{x.score}}</td>
<td><input type="button" value="删除" ng-click="deleteG(x.name)"/></td>
</tr>
</tbody>
</table>
<span>总价:{{Totalprice()}}</span>
<fieldset ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>电影名称:</td>
<td><input type="text" ng-model="cname"/></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr>
<td>类别</td>
<td>
<select ng-init="select_movietype=moviesType[0]" ng-model="select_movietype" ng-options="x.mainType for x in moviesType"
ng-click="Change()"></select>
<select ng-init="select_two=select_movietype.childType[0]" ng-model="select_two" ng-options="g for g in select_movietype.childType"></select>
</td>
</tr>
<tr>
<td>时长:</td>
<td><input type="text" ng-model="ctime"/></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td>导演:</td>
<td><input type="text" ng-model="cauthor"/></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td>售价:</td>
<td><input type="text" ng-model="cprice"/></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr>
<td>上映时间:</td>
<td><input type="text" ng-model="cplaytime"/></td>
<td><span id="s_playtime" class="tip"></span></td>
</tr>
<tr>
<td>评分:</td>
<td><input type="text" ng-model="cscore"/></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr><td align="center" >
<input type="button" id="" value="保存" ng-click="Save()"/>
</td>
</tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.order="0";
4000
$scope.checkAll=false;
$scope.movies=[];
$scope.isShow=false;
$scope.movies= [
{"price":35.9,"author":"田羽生","time":120,"type":["喜剧","爱情"],"id":1,"name":"前任三","playTime":1511050949001,"score":9.3},
{"price":45.5,"author":"格雷","time":145,"type":["动作","冒险"],"id":2,"name":"速度与激情8","playTime":1450000949001,"score":9.5},
{"price":42.5,"author":"宋阳","time":135,"type":["喜剧","爱情"],"id":3,"name":"羞羞的铁拳","playTime":1511000949001,"score":8.6},
{"price":38.9,"author":"弗拉基米尔","time":108,"type":["冒险","科幻"],"id":4,"name":"太空救援","playTime":1516000949001,"score":9.4} ];
$scope.moviesType=[
{"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
{"mainType":"爱情","childType":["爱情1","爱情2","爱情3"]},
{"mainType":"科幻","childType":["科幻1","科幻2"]}];
$scope.deleteG=function(obj){
for (var i = 0; i < $scope.movies.length; i++) {
if($scope.movies[i].name==obj){
$scope.movies.splice(i,1);
break;
}
}
}
$scope.Totalprice=function(){
var total=0;
for (var i = 0; i < $scope.movies.length; i++) {
total+=$scope.movies[i].price;
}
return total;
}
$scope.clearMovie=function(){
$scope.movies=[];
}
$scope.clearAll=function(){
var checks=$("input:checked");
for (var i = 0; i < checks.length; i++) {
var fn=checks[i].value;
for (var j = 0; j < $scope.movies.length; j++) {
if(fn==$scope.movies[j].name){
$scope.movies.splice(j,1);
break;
}
}
}
}
$scope.Change=function(){
$scope.select_two=$scope.select_movietype.childType[0];
}
$scope.Save=function(){
var cname=$scope.cname;
var ctime=$scope.ctime;
var cauthor=$scope.cauthor;
var cprice=$scope.cprice;
var cplaytime=$scope.cplaytime;
var cscore=$scope.cscore;
var datas={};
datas.name=cname;
datas.time=ctime;
datas.author=$scope.cauthor;
datas.price=parseInt($scope.cprice) ;
datas.playTime=cplaytime;
datas.score=$scope.cscore;
var types=[];
types.push($scope.select_movietype.mainType);
types.push($scope.select_two);
datas.type=types;
$scope.movies.push(datas);
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" charset="UTF-8"></script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<input type="text" placeholder="根据名称模糊查询" ng-model="searchKey"/>
<input type="button" value="清空" ng-click="clearMovie()"/>
<input type="button" value="批量删除" ng-click="clearAll()" />
<input type="button" value="添加" ng-click="isShow=!isShow"/>
<select ng-model="order">
<option value="0">按要求排序</option>
<option value="time">时长升序排列</option>
<option value="-time">时长降序排列</option>
</select>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> <input type="checkbox" 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 movies|filter:{name:searchKey}|orderBy:order">
<td> <input type="checkbox" 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}}</td>
<td>{{x.playTime}}</td>
<td>{{x.score}}</td>
<td><input type="button" value="删除" ng-click="deleteG(x.name)"/></td>
</tr>
</tbody>
</table>
<span>总价:{{Totalprice()}}</span>
<fieldset ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>电影名称:</td>
<td><input type="text" ng-model="cname"/></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr>
<td>类别</td>
<td>
<select ng-init="select_movietype=moviesType[0]" ng-model="select_movietype" ng-options="x.mainType for x in moviesType"
ng-click="Change()"></select>
<select ng-init="select_two=select_movietype.childType[0]" ng-model="select_two" ng-options="g for g in select_movietype.childType"></select>
</td>
</tr>
<tr>
<td>时长:</td>
<td><input type="text" ng-model="ctime"/></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr>
<td>导演:</td>
<td><input type="text" ng-model="cauthor"/></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr>
<td>售价:</td>
<td><input type="text" ng-model="cprice"/></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr>
<td>上映时间:</td>
<td><input type="text" ng-model="cplaytime"/></td>
<td><span id="s_playtime" class="tip"></span></td>
</tr>
<tr>
<td>评分:</td>
<td><input type="text" ng-model="cscore"/></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr><td align="center" >
<input type="button" id="" value="保存" ng-click="Save()"/>
</td>
</tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.order="0";
4000
$scope.checkAll=false;
$scope.movies=[];
$scope.isShow=false;
$scope.movies= [
{"price":35.9,"author":"田羽生","time":120,"type":["喜剧","爱情"],"id":1,"name":"前任三","playTime":1511050949001,"score":9.3},
{"price":45.5,"author":"格雷","time":145,"type":["动作","冒险"],"id":2,"name":"速度与激情8","playTime":1450000949001,"score":9.5},
{"price":42.5,"author":"宋阳","time":135,"type":["喜剧","爱情"],"id":3,"name":"羞羞的铁拳","playTime":1511000949001,"score":8.6},
{"price":38.9,"author":"弗拉基米尔","time":108,"type":["冒险","科幻"],"id":4,"name":"太空救援","playTime":1516000949001,"score":9.4} ];
$scope.moviesType=[
{"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
{"mainType":"爱情","childType":["爱情1","爱情2","爱情3"]},
{"mainType":"科幻","childType":["科幻1","科幻2"]}];
$scope.deleteG=function(obj){
for (var i = 0; i < $scope.movies.length; i++) {
if($scope.movies[i].name==obj){
$scope.movies.splice(i,1);
break;
}
}
}
$scope.Totalprice=function(){
var total=0;
for (var i = 0; i < $scope.movies.length; i++) {
total+=$scope.movies[i].price;
}
return total;
}
$scope.clearMovie=function(){
$scope.movies=[];
}
$scope.clearAll=function(){
var checks=$("input:checked");
for (var i = 0; i < checks.length; i++) {
var fn=checks[i].value;
for (var j = 0; j < $scope.movies.length; j++) {
if(fn==$scope.movies[j].name){
$scope.movies.splice(j,1);
break;
}
}
}
}
$scope.Change=function(){
$scope.select_two=$scope.select_movietype.childType[0];
}
$scope.Save=function(){
var cname=$scope.cname;
var ctime=$scope.ctime;
var cauthor=$scope.cauthor;
var cprice=$scope.cprice;
var cplaytime=$scope.cplaytime;
var cscore=$scope.cscore;
var datas={};
datas.name=cname;
datas.time=ctime;
datas.author=$scope.cauthor;
datas.price=parseInt($scope.cprice) ;
datas.playTime=cplaytime;
datas.score=$scope.cscore;
var types=[];
types.push($scope.select_movietype.mainType);
types.push($scope.select_two);
datas.type=types;
$scope.movies.push(datas);
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态添加删除Option达到二级联动
- HTML 添加+二级联动+ 删除+批量删除
- HTML jquery 添加+删除+批量删除+二级联动
- JQuery实现添加删除数据全选反选隔行变色二级联动
- 表单验证+二级联动+添加+全选/反选+删除
- 添加二次联动批量删除查询请求网络
- 二级联动实现省市表单添加删除操作
- 二级联动添加表格及删除按钮弹出对话框
- 添加数据+二级联动+全选删除
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- SqlServer——批量操作（批量添加，删除）
- <linux小脚本>批量添加/删除用户
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 用户表（查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除）
- 表单 的 地址联动 添加~删除
- [转]Ibatis 批量添加修改删除-batch-insert-update-delete
- JavaScript的简单联动下拉和控件添加删除
- asp批量添加修改删除操作示例代码
- 初学Html5+CSS之用表格创建添加信息表+省市联动+删除
- wordpress 批量操作后台评论中直接添加“永久删除”选项，简便操作