angular练习电影

最新推荐文章于 2020-05-28 10:24:00 发布

zhujianhang0425

最新推荐文章于 2020-05-28 10:24:00 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/zhujianhang0425/article/details/79411759

版权

这是一个使用AngularJS创建的电影管理应用示例。通过HTTP请求获取电影数据，提供搜索、排序、删除和更新电影信息的功能。用户可以按电影名称、时间、价格、评分等条件进行排序，批量删除电影，以及修改电影的评分。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<title></title>
<script>
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.movies="";
$http({
method:"get",
url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).then(function success(response){
$scope.movies=response.data;
},function error(response){

}).finally();

$scope.searchKey ="";
$scope.orderkey ="";
$scope.deleteone=function(dname){
for(var i=0;i<$scope.movies.length;i++){
if($scope.movies[i].name==dname){
$scope.movies.splice(i,1);
}
}
};
$scope.deleteMore=function(){
if ($scope.allcheck) {
$scope.MyJson=[];
}else{
var check =$(":checkbox:checked");
for(var i=check.length-1;i>=0;i--){
$scope.movies.splice(check[i].value,1);
}
}
};

$scope.updateShow=false;
$scope.updateMovie="";
$scope.score="";
$scope.showUpdateMovie=function(updatename){
for (var i=0;i<$scope.movies.length;i++) {
if ($scope.movies[i].name == updatename) {
$scope.updateMovie=$scope.movies[i];
break;
}
}
$scope.score=$scope.updateMovie.score;
$scope.updateShow=true;
};
$scope.updateMovieF=function(){
$scope.updateMovie.score=$scope.score;
$scope.updateShow=false;
};
});
</script>

<style>
#dl1{
whith: 100px;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

<center>
<div>
<input id="id1" width="50px" ng-model="searchKey" type="search" /> <input type="button" value="搜索" />
<select ng-model="orderKey">
<option value="">--按要求排序--</option>
<option value="time">--按时间排序--</option>
<option value="-time">--按时间倒序--</option>
<option value="price">--按价格排序--</option>
<option value="-price">--按价格倒序--</option>
<option value="playeTime">--按上映时间排序--</option>
<option value="-playTime">--按上映时间倒序--</option>
<option value="socre">--按评分排序--</option>
<option value="-score">--按评分倒序--</option>
</select>
<input type="button" ng-click="deleteMore()" value="批量删除" />
</div>
<br />
<div>
<table border="1px" cellpadding="1px" cellspacing="0px">
<tr style="background-color: red;">
<td><input type="checkbox" ng-model="allcheck"></td>
<td>电影名称</td>
<td>类别</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>

<tr ng-repeat=" m in movies | filter:{name:searchKey} | orderBy:orderKey">
<td><input type="checkbox" value="{{m.name}}" ng-model="allcheck" /></td>
<td>{{m.name}}</td>
<td>{{m.type[0]}},{{m.type[1]}}</td>
<td>{{m.time}}分钟</td>
<td>{{m.author}}</td>
<td>{{m.price | currency:"￥:"}}</td>
<td>{{m.playTime | date:"yyy-MM-dd hh:mm:ss"}}</td>
<td>{{m.score}}</td>
<td>
<input type="button" ng-click="showUpdateMovie(m.name);" value="修改"> <input type="button" ng-click="deleteone(m.name);" value="删除">
</td>

</tr>
</table>
</div>
<div id="div2" ng-show="updateShow">
<h3>评分修改</h3>
<p>评分<input type="text" ng-model="score"></p>
<p><input type="button" ng-click="updateMovieF();" value="确认修改"></p>
</div>
</center>
</body>
</html>

zhujianhang0425

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angular练习电影

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user
复制链接

扫一扫