<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js" ></script>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$scope.moves=[
{"name":"前任三","price":"70","product":"北京"},
{"name":"山楂树","price":"60","product":"河北"},
{"name":"西游记","price":"50","product":"天津"},
{"name":"葫芦娃","price":"45","product":"上海"},
];
$scope.orderKey="";
$scope.seacherKey="";
$scope.showTable=true;
$scope.checkAll=false;
$scope.showUpdate=false;
$scope.showAdd=false;
//添加
$scope.add1 = function (){
$scope.showAdd=true;
}
$scope.addMoves=function(){
var move={};
move.name=$scope.name;
move.price=$scope.price;
move.product=$scope.product;
$scope.moves.push(move);
$scope.showAdd=false;
$scope.showTable=true;
}
//删除按钮事件
$scope.delete=function($index){
$scope.moves.splice($index,1);
if ($scope.moves.length==0) {
$scope.showTable=false;
}
}
//批量删除
$scope.deleteMOre=function(){
$(":checkbox:checked").each(function(){
var id1=$(this).val();
alert(id1);
for (var i=0;i<$scope.moves.length;i++) {
if($scope.moves[i].name == id1){
$scope.moves.splice(i,1);
}
}
})
}
//定义回显接收的字段
$scope.upname="";
$scope.upprice="";
$scope.upproduct="";
//修改的回显数据
$scope.showMoves=function($index){
$scope.showUpdate=true;
var move=$scope.moves[$index];
$scope.upname=move.name;
$scope.upprice=move.price;
$scope.upproduct=move.product;
//记录修改的索引
$scope.upindex=$index;
}
//修改数据给修改按钮一个事件
$scope.Update=function(){
$scope.moves[$scope.upindex].name=$scope.upname;
$scope.moves[$scope.upindex].price=$scope.upprice;
$scope.moves[$scope.upindex].product=$scope.upproduct;
$scope.showUpdate=false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<input type="text" placeholder="输入电影名称" ng-model="seacherKey" />
排序:<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">--名称正序--</option>
<option value="-name">--名称倒序--</option>
<option value="price">--价格正序--</option>
<option value="-price">--价格倒序--</option>
</select>
<input type="button" value="添加" ng-click="add1()" />
<br />
<div ng-show="showAdd">
电影名称:<input type="text" placeholder="请输入电影名称" ng-model="name" /><br />
电影售价:<input type="text" placeholder="请输入电影售价" ng-model="price" /><br />
地址:<input type="text" placeholder="请输入电影地址" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addMoves();" />
</div>
<table border="1px" ng-show="showTable">
<tr>
<th> <input type="checkbox" ng-model="checkAll" /> </th>
<th>电影名称</th>
<th>售价</th>
<th>地点</th>
<th>操作</th>
</tr>
<tr ng-repeat="m in moves | orderBy:orderKey | filter:seacherKey">
<td> <input type="checkbox" ng-model="checkAll" value="{{m.name}}" /> </td>
<td>{{m.name}}</td>
<td>{{m.price | currency:"￥: "}}</td>
<td>{{m.product}}</td>
<td> <input type="button" value="删除" ng-click="delete($index);" />
<input type="button" value="修改" ng-click="showMoves($index);" />
</td>
</tr>
</table>
<input type="button" value="批量删除" ng-click="deleteMOre();" />
<div ng-show="showUpdate">
电影名称:<input type="text" ng-model="upname" /><br />
电影售价:<input type="text" ng-model="upprice" /><br />
地址:<input type="text" ng-model="upproduct" /><br />
<input type="button" value="修改" ng-click="Update();" />
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js" ></script>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$scope.moves=[
{"name":"前任三","price":"70","product":"北京"},
{"name":"山楂树","price":"60","product":"河北"},
{"name":"西游记","price":"50","product":"天津"},
{"name":"葫芦娃","price":"45","product":"上海"},
];
$scope.orderKey="";
$scope.seacherKey="";
$scope.showTable=true;
$scope.checkAll=false;
$scope.showUpdate=false;
$scope.showAdd=false;
//添加
$scope.add1 = function (){
$scope.showAdd=true;
}
$scope.addMoves=function(){
var move={};
move.name=$scope.name;
move.price=$scope.price;
move.product=$scope.product;
$scope.moves.push(move);
$scope.showAdd=false;
$scope.showTable=true;
}
//删除按钮事件
$scope.delete=function($index){
$scope.moves.splice($index,1);
if ($scope.moves.length==0) {
$scope.showTable=false;
}
}
//批量删除
$scope.deleteMOre=function(){
$(":checkbox:checked").each(function(){
var id1=$(this).val();
alert(id1);
for (var i=0;i<$scope.moves.length;i++) {
if($scope.moves[i].name == id1){
$scope.moves.splice(i,1);
}
}
})
}
//定义回显接收的字段
$scope.upname="";
$scope.upprice="";
$scope.upproduct="";
//修改的回显数据
$scope.showMoves=function($index){
$scope.showUpdate=true;
var move=$scope.moves[$index];
$scope.upname=move.name;
$scope.upprice=move.price;
$scope.upproduct=move.product;
//记录修改的索引
$scope.upindex=$index;
}
//修改数据给修改按钮一个事件
$scope.Update=function(){
$scope.moves[$scope.upindex].name=$scope.upname;
$scope.moves[$scope.upindex].price=$scope.upprice;
$scope.moves[$scope.upindex].product=$scope.upproduct;
$scope.showUpdate=false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<input type="text" placeholder="输入电影名称" ng-model="seacherKey" />
排序:<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">--名称正序--</option>
<option value="-name">--名称倒序--</option>
<option value="price">--价格正序--</option>
<option value="-price">--价格倒序--</option>
</select>
<input type="button" value="添加" ng-click="add1()" />
<br />
<div ng-show="showAdd">
电影名称:<input type="text" placeholder="请输入电影名称" ng-model="name" /><br />
电影售价:<input type="text" placeholder="请输入电影售价" ng-model="price" /><br />
地址:<input type="text" placeholder="请输入电影地址" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addMoves();" />
</div>
<table border="1px" ng-show="showTable">
<tr>
<th> <input type="checkbox" ng-model="checkAll" /> </th>
<th>电影名称</th>
<th>售价</th>
<th>地点</th>
<th>操作</th>
</tr>
<tr ng-repeat="m in moves | orderBy:orderKey | filter:seacherKey">
<td> <input type="checkbox" ng-model="checkAll" value="{{m.name}}" /> </td>
<td>{{m.name}}</td>
<td>{{m.price | currency:"￥: "}}</td>
<td>{{m.product}}</td>
<td> <input type="button" value="删除" ng-click="delete($index);" />
<input type="button" value="修改" ng-click="showMoves($index);" />
</td>
</tr>
</table>
<input type="button" value="批量删除" ng-click="deleteMOre();" />
<div ng-show="showUpdate">
电影名称:<input type="text" ng-model="upname" /><br />
电影售价:<input type="text" ng-model="upprice" /><br />
地址:<input type="text" ng-model="upproduct" /><br />
<input type="button" value="修改" ng-click="Update();" />
</div>
</center>
</body>
</html>
4896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
