<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.moves = "",
//网络请求数据
$http({
method:"get",
url:"phones.json"
}).then(function success(response){
$scope.moves = response.data;//获得网络请求的数据
debugger;
},function error(response){
debugger;
}).finally();
//查询过滤的条件
$scope.searchKey = "";
//排序条件
$scope.orderKey = "";
//显示添加区域的标记
$scope.showAdd = false;
//添加信息字段的绑定属性
$scope.mname = "";
$scope.mprice = "";
$scope.mtime = "";
$scope.mtype = "";
$scope.mauthor = "";
$scope.mplayTime = "";
$scope.mscore = "";
//添加函数
$scope.addMove = function(){
//获得新数据，创建电影对象
var _move = {};
_move.name = $scope.mname;
_move.price = $scope.mprice;
_move.time = $scope.mtime;
_move.type = $scope.mtype;
_move.author = $scope.mauthor;
_move.playTime = $scope.mplayTime;
_move.score = $scope.mscore;
//添加到数据源中
$scope.moves.push(_move);
//关闭添加区域
$scope.showAdd = false;
};
//删除函数
$scope.deleteOne = function(dname){
//for循环遍历数据源
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var cmove = $scope.moves[i];
if(cmove.name == dname){
$scope.moves.splice(i,1);
break;
}
}
};
//批量删除
$scope.deleteMore = function(){
//获得所有要删除的电影的复选框
var cks = $("input[type=checkbox]:checked");
//遍历汇集所有要删除的电影的名字,,,收集要删除的电影的名字
var cknames = "";
for(var i=0;i<cks.length;i++){
var ckname = cks[i].value;
cknames = cknames + ckname+",";
}
//for循环遍历数据源，，保存不删除的电影
var lastMoves = [];//用来存放不删除的电影的容器
for(var i=0;i<$scope.moves.length;i++){
var a = $scope.moves[i];//得到一个电影
if(cknames.indexOf(a.name) == -1){//这个电影的名字不在删除的范围之内,,保存
lastMoves.push(a);
}
}
//重新设置数据源
$scope.moves = lastMoves;
};
$scope.sname = "";
$scope.sprice = "";
$scope.stime = "";
$scope.showUpdate = false;
//修改----回显功能
$scope.showMove = "";//引用要修改的电影对象
$scope.showOne = function(sname){
$scope.showUpdate = true;
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var smove = $scope.moves[i];
if(smove.name == sname){//找到要修改的电影信息
$scope.showMove = smove;
break;//找到后，跳出循环
}
}
//显示修改信息
$scope.sname = $scope.showMove.name;
$scope.sprice = $scope.showMove.price;
$scope.stime = $scope.showMove.time;
$scope.type = $scope.showMove.type;
$scope.author = $scope.showMove.author;
$scope.playTime = $scope.showMove.playTime;
$scope.score = $scope.showMove.score;
}
//最终修改
$scope.updateMove = function(){
$scope.showMove.name = $scope.sname;
$scope.showMove.price = $scope.sprice;
$scope.showMove.time = $scope.stime;
$scope.showMove.author = $scope.author;
$scope.showMove.playTime = $scope.playTime;
$scope.showMove.score = $scope.score;
$scope.showUpdate = false;
}
});
</script>
<style>
tbody tr:nth-child(even){
background-color: deeppink;
}
tbody tr:nth-child(odd){
background-color:yellow ;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" ng-model="searchKey" />
<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="showAdd=true"/>
<input type="button" value="批量删除" ng-click="deleteMore();"/>
</div>
<br />
<div ng-show="showAdd">
名字：<input type="text" ng-model="mname"/><br />
票价：<input type="text" ng-model="mprice"/><br />
时长：<input type="text" ng-model="mtime"/><br />
类型：<input type="text" ng-model="mtype"/><br />
导演：<input type="text" ng-model="mauthor"/><br />
时间：<input type="text" ng-model="mplayTime"/><br />
评分：<input type="text" ng-model="mscore"/><br />
<input type="button" value="添加" ng-click="addMove();"/>
</div>
<br />
<table border="1px" cellpadding="1px" cellspacing="0px">
<tr style="background-color: grey;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>序号</th>
<th>名字</th>
<th>票价</th>
<th>时长</th>
<th>类型</th>
<th>导演</th>
<th>时间</th>
<th>评分</th>
<th>操作</th>
</tr>
<tbody>
<tr ng-repeat="m in moves |filter:searchKey |orderBy:orderKey">
<td><input type="checkbox" value="{{m.name}}" ng-model="checkAll"/></td>
<td>{{$index}}</td>
<td>{{m.name}}</td>
<td>{{m.price}}</td>
<td>{{m.time}}分钟</td>
<td>{{m.type[0]}},{{m.type[1]}}</td>
<td>{{m.author}}</td>
<td>{{m.time |date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{m.score}}</td>
<td><input type="button" value="删除" ng-click="deleteOne(m.name);"/>
<input type="button" value="修改" ng-click="showOne(m.name);"/>
</td>
</tr>
</tbody>
</table>
<div ng-show="showUpdate">
名字：<input type="text" ng-model="sname"/><br />
票价：<input type="text" ng-model="sprice"/><br />
时长：<input type="text" ng-model="stime"/><br />
类型：<input type="text" ng-model="type"/><br />
导演：<input type="text" ng-model="author"/><br />
时间：<input type="text" ng-model="playTime"/><br />
评分：<input type="text" ng-model="score"/><br />
<input type="button" value="修改" ng-click="updateMove();"/>
</div>
</center>
</body>
</html>