<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr:nth-child(even) {
background-color: lightgray;
}
tr button {
width: 30px;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("con",function($scope,$http){
$http({
method:"get",
url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).success(function(data){ //data 服务器返回请求数据
$scope.stus = data;
}).error(function(data){
//请求失败了
alert("请求失败");
});
$scope.del = function(e){
for(var i in $scope.stus){
if($scope.stus[i].name ==e){
if(confirm("确认删除吗?")) {
$scope.stus.splice(i, 1);
i--;
}
}
}
}
//ck全选
$scope.ckAll = function(){
for(var i=0; i<$scope.stus.length;i++){
$scope.stus[i].ck = $scope.xuan;
}
}
$scope.empty = function(){
var sh=0;
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck) {
$scope.stus.splice(i, 1);
sh++;
i--;
}
}
}
$scope.xiu = function(name){
for(var i in $scope.stus){
if($scope.stus[i].name == name){
$scope. name2 = $scope.stus[i].name;
$scope.score2 = $scope.stus[i].score;
}
}
$scope.fsf = true;
}
$scope.xiu2 = function(){
var n_name = $scope.name2;
var n_score = $scope.score2;
for(var i = 0; i < $scope.stus.length; i++){
if($scope.stus[i].name==n_name){
$scope.stus[i].score = n_score;
}}
$scope.fsf=false;
}
});
</script>
</head>
<body ng-controller="con">
<div>
模糊查询:<input ng-model="mohu"/>
<select ng-model="paiscore">
<option value="">按要求排序</option>
<option value="-score">按评分倒序</option>
<option value="+score">按评分正序</option>
</select>
<button ng-click="empty()">批量删除</button>
</div>
<table width="900" border="1" cellspacing="0">
<tr style="background-color: lightslategray;">
<td><input type="checkbox" ng-model="xuan" ng-click="ckAll()"/></td>
<td>电影名称</td>
<td>类型</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>
<tr ng-repeat="a in stus| filter:{name:mohu}|orderBy:paiscore">
<td><input type="checkbox" ng-model="a.ck"/></td>
<td>{{a.name}}</td>
<td>{{a.type}}</td>
<td>{{a.time| date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{a.author}}</td>
<td>{{a.price| currency:"¥"}}</td>
<td>{{a.playTime}}</td>
<td>{{a.score}}</td>
<td><button ng-click="del(a.name)" style="width: 70px;">删除</button>
<button ng-click="xiu(a.name)" style="width: 70px;">修改</button>
</td>
</tr>
</table>
<div style="width: 180px;border: 1px solid #000000; height: 140px; margin-left: 490px;" ng-show="fsf">
<div style="margin: 0 auto;">
<h2 style="margin-left: 30px;">评分修改</h2>
<input input type="hidden" value="" ng-model="name2" />
评分<input placeholder="评分" ng-model="score2" /><br />
<button ng-click="xiu2()" style="width: 100px;">修改</button>
</div>
</div>
</body>
</html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr:nth-child(even) {
background-color: lightgray;
}
tr button {
width: 30px;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("con",function($scope,$http){
$http({
method:"get",
url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).success(function(data){ //data 服务器返回请求数据
$scope.stus = data;
}).error(function(data){
//请求失败了
alert("请求失败");
});
$scope.del = function(e){
for(var i in $scope.stus){
if($scope.stus[i].name ==e){
if(confirm("确认删除吗?")) {
$scope.stus.splice(i, 1);
i--;
}
}
}
}
//ck全选
$scope.ckAll = function(){
for(var i=0; i<$scope.stus.length;i++){
$scope.stus[i].ck = $scope.xuan;
}
}
$scope.empty = function(){
var sh=0;
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck) {
$scope.stus.splice(i, 1);
sh++;
i--;
}
}
}
$scope.xiu = function(name){
for(var i in $scope.stus){
if($scope.stus[i].name == name){
$scope. name2 = $scope.stus[i].name;
$scope.score2 = $scope.stus[i].score;
}
}
$scope.fsf = true;
}
$scope.xiu2 = function(){
var n_name = $scope.name2;
var n_score = $scope.score2;
for(var i = 0; i < $scope.stus.length; i++){
if($scope.stus[i].name==n_name){
$scope.stus[i].score = n_score;
}}
$scope.fsf=false;
}
});
</script>
</head>
<body ng-controller="con">
<div>
模糊查询:<input ng-model="mohu"/>
<select ng-model="paiscore">
<option value="">按要求排序</option>
<option value="-score">按评分倒序</option>
<option value="+score">按评分正序</option>
</select>
<button ng-click="empty()">批量删除</button>
</div>
<table width="900" border="1" cellspacing="0">
<tr style="background-color: lightslategray;">
<td><input type="checkbox" ng-model="xuan" ng-click="ckAll()"/></td>
<td>电影名称</td>
<td>类型</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>
<tr ng-repeat="a in stus| filter:{name:mohu}|orderBy:paiscore">
<td><input type="checkbox" ng-model="a.ck"/></td>
<td>{{a.name}}</td>
<td>{{a.type}}</td>
<td>{{a.time| date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{a.author}}</td>
<td>{{a.price| currency:"¥"}}</td>
<td>{{a.playTime}}</td>
<td>{{a.score}}</td>
<td><button ng-click="del(a.name)" style="width: 70px;">删除</button>
<button ng-click="xiu(a.name)" style="width: 70px;">修改</button>
</td>
</tr>
</table>
<div style="width: 180px;border: 1px solid #000000; height: 140px; margin-left: 490px;" ng-show="fsf">
<div style="margin: 0 auto;">
<h2 style="margin-left: 30px;">评分修改</h2>
<input input type="hidden" value="" ng-model="name2" />
评分<input placeholder="评分" ng-model="score2" /><br />
<button ng-click="xiu2()" style="width: 100px;">修改</button>
</div>
</div>
</body>
</html>