<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<style type="text/css">
tr td {
}
.aa{
background: blue;
}
.bb{
background-color: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" placeholder="按电影名称模糊查询..." ng-model="name" />
<select ng-model="key">
<option>--按要求排序--</option>
<option value="playTime">+上映时间+</option>
<option value="-playTime">-上映时间-</option>
<option value="place">+售价+</option>
<option value="-price">-售价-</option>
</select>
<button ng-click="isAddShow=!isAddShow">添加</button>
<button ng-click="delAll1()">批量删除</button>
<div ng-show="isAddShow">
电影名称:<input type="text" ng-model="aname" /><span class="tip" id="sp1"></span><br /> 售价:
<input type="text" ng-model="aprice" /><span class="tip" id="sp2"></span><br /> 类别:
<input type="text" ng-model="atype" /><span class="tip" id="sp3"></span><br /> 电影时长:
<input type="text" ng-model="aplayTime" /><span class="tip" id="sp4"></span><br /> 时长:
<input type="text" ng-model="atime" /><span class="tip" id="sp5"></span><br />
<input type="button" value="添加" ng-click="add()" />
</div>
<table border="1" cellpadding="5" cellspacing="0">
<tr align="center">
<td><input type="checkbox" onclick="qx(this)" /></td>
<td>电影名称</td>
<td>类别</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in shops|filter:name|orderBy:key" align="center" class="$index%2==0?aa:bb">
<td><input type="checkbox" class="a" value="{{u.id}}" /></td>
<td>{{u.name}}</td>
<td>{{u.type}}</td>
<td>{{u.time}}</td>
<td>{{u.author}}</td>
<td>{{u.price|currency:"￥:"}}</td>
<td>{{u.playTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{u.score}}</td>
<td>
<button ng-click="del(u.id)">删除</button>
<button ng-click="xg(u.id)">修改</button>
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
您要修改的票价:<br /><input type="text"ng-model="bprice" placeholder="请输入票价" /><br /><br />
<input type="button" value="ok" ng-click="xg1()"/>
<input style="margin-left: 45px;" type="button" value="cancle" ng-click="xg2()"/>
</div>
<script type="text/javascript">
function qx(obj) {
var cbs = $(".a");
alert(666)
if(obj.checked) {
cbs.each(function() {
this.checked = true;
})
} else {
cbs.each(function() {
this.checked = false;
})
}
}
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.del = function(gid) {
if(confirm("确认删除吗?")) {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id == gid) {
$scope.shops.splice(i, 1);
break;
}
}
}
}
$scope.delAll = function() {
var cbs = $("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);
}
}
})
}
}
$scope.add = function() {
var newgoods = {};
newgoods.price = $scope.aprice;
newgoods.name = $scope.aname;
newgoods.type = $scope.atype;
newgoods.playTime = $scope.aplayTime;
newgoods.time = $scope.atime;
newgoods.author = "张子旭";
newgoods.score = 9.9;
newgoods.playTime = new Date();
//
scope.shops.push(newgoods);
$scope.isAddShow = false;
}
$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": 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.showUpdate=false;
$scope.xg=function(id) {
$scope.showUpdate=true;
var update;
for (var i = 0; i < $scope.shops.length ;i++) {
if($scope.shops[i].id==id){
update = $scope.shops[i];
break;
}
}
//回显
$scope.bprice = update.price;
//修改
$scope.xg1=function() {
update.price=$scope.bprice;
$scope.showUpdate=false;
}
$scope.xg2=function() {
$scope.showUpdate=false;
}
}
});
</script>
</body>