<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>
</head>
<style type="text/css">
.y {
background-color: pink;
}
.p {
background-color: yellowgreen;
}
</style>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名字查询" ng-model="key" />
<select name="" ng-model="orderkey">
<option value="">--按要求排序--</option>
<option value="name">--名称正序--</option>
<option value="-name">--名称倒序--</option>
<option value="author">--姓名正序--</option>
<option value="-author">--姓名倒序--</option>
</select>
<input type="button" name="" id="" value="添加" ng-click="isAddShow=!isAddShow" />
<div>
<ul style="list-style: none;" ng-show="isAddShow">
<li>名称<input type="text" name="" id="" value="" ng-model="uname" /></li>
<li>类别<input type="text" name="" id="" value="" ng-model="utype" /></li>
<li>时长<input type="text" name="" id="" value="" ng-model="utime" /></li>
<li>导演<input type="text" name="" id="" value="" ng-model="uauthor" /></li>
<li>售价<input type="text" name="" id="" value="" ng-model="uprice" /></li>
<li>时间<input type="date" name="" id="" value="" ng-model="uplayTime" /></li>
<li>评分<input type="text" name="" id="" value="" ng-model="uscore" /></li>
<li><input type="button" name="" id="" value="保存" ng-click="add()" /></li>
</ul>
</div>
<input type="button" name="" id="" value="批量删除" ng-click="delMore()" />
<table border="1" cellspacing="0" cellpadding="5">
<tr style="background-color: gray;">
<th><input type="checkbox" name="" id="" value=""onclick="xz(this)" /></th>
<th>电影名称</th>
<th>类别</th>
<th>时长</th>
<th>导演</th>
<th>售价</th>
<th>上映时间</th>
<th>评分</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in shops|filter:key|orderBy:orderkey" class="{{$index%2==0?'y':'p'}}">
<td><input type="checkbox" name="" id="" value="{{x.id}}" /></td>
<td>{{x.name}}</td>
<td>{{x.type[0]+","+x.type[1]}}</td>
<td>{{x.time}}</td>
<td>{{x.author}}</td>
<td>{{x.price|currency:"￥"}}</td>
<td>{{x.playTime|date:"yy-MM-dd"}}</td>
<td>{{x.score}}</td>
<td><input type="button" name="" id="" value="删除" ng-click="del(x.id)" />
<input type="button" name="" id="" value="修改" ng-click="change(x.price)" />
</td>
</tr>
</table>
<div>
<ul style="list-style: none;" ng-show="ischangeshow">
<li>售价<input type="text" name="" id="" value="" ng-model="uprice" /></li>
<li><input type="button" name="" id="" value="修改" ng-click="update()" /></li>
</ul>
</div>
<script type="text/javascript">
function xz(){
var cbs=$("td [type=checkbox]");
cbs.each(function(){
if(this.checked){
//设置不选中
//$(this).prop("checked",false);
this.checked=false;
}else{
//$(this).prop("checked",true);
this.checked=true;
}
});
}
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.shops = [{
"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": 12436261322,
"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.del = function(cid) {
if(confirm("确定删除吗？")) {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id = cid) {
$scope.shops.splice(i, 1);
alert("删除成功");
break;
}
}
}
}
$scope.delMore = function() {
var cbs = $("td input:checked");
if(cbs.length == 0) {
alert("请选择");
} else {
cbs.each(function() {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id = $(this).val()) {
$scope.shops.splice(i, 1);
break;
}
}
})
}
}
$scope.add = function() {
var newdata = {};
newdata.name = $scope.uname;
newdata.type = $scope.utype;
newdata.time = $scope.utime;
newdata.author = $scope.uauthor;
newdata.price = $scope.uprice;
newdata.playTime = $scope.uplayTime;
newdata.score = $scope.uscore;
if(newdata.name==""||newdata.name==null||newdata.name==undefined)
{
alert("电影名称不能为空");
return;
}
if(newdata.type==""||newdata.type==null||newdata.type==undefined)
{
alert("类型不能为空");
return;
}
if(newdata.time==""||newdata.time==null||newdata.time==undefined)
{
alert("时长不能为空");
return;
}
if(newdata.author==""||newdata.author==null||newdata.author==undefined)
{
alert("姓名不能为空");
return;
}
if(newdata.price==""||newdata.price==null||newdata.price==undefined)
{
alert("单价不能为空");
return;
}
if(newdata.playTime==""||newdata.playTime==null||newdata.playTime==undefined)
{
alert("时间不能为空");
return;
}
if(newdata.score==""||newdata.score==null||newdata.score==undefined)
{
alert("评分不能为空");
return;
}
$scope.shops.push(newdata);
$scope.isshow = false;
}
var update;
$scope.change = function(uprice) {
$scope.ischangeshow = true;
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].price == uprice) {
update = $scope.shops[i]
$scope.uprice = $scope.shops[i].price;
break;
}
}
}
$scope.update=function(){
update.price=$scope.uprice;
$scope.ischangeshow=false;
}
});
</script>
</body>