angular电影管理

全栈若城

发布于 2024-02-29 18:14:04

1010

发布于 2024-02-29 18:14:04

css如下：

			div{
				width: 300px;
				height: ;
				margin: 0 auto;
			}
			div h5{
				width: 300px;
				text-align: center;
				height: 30px;
			}
			div p{
				width: 250px;
				margin: 0 auto;
			}
			div input{
				float: right;
			}
			div button{
				width: 100px;
				height: 30px;
				margin: 0 auto;
				display: block;
			}
	
		tr:nth-child(odd){
			background: #e5e5e5;
		}
		tr:first-child{
			background: #999;
		}

html

<body ng-app="myApp" ng-controller="myCtrl">
	<h2 style="text-align: center;">电影管理</h2>
		<input type="text" placeholder="电影名称" ng-model="by" />
		<select ng-model="orders">
			<option value="">---排序---</option>
			<option value="-name">按名称排序</option>
			<option value="-price">按票价排序</option>

		</select>
		<input type="button" value="添加" ng-click="addAll()" />
		<button ng-click="plsc()">批量删除</button>
		<table border="1" width="100%">
			<tr>
				<th><input type="checkbox" ng-click="fx()" /></th>
				<th>电影名称 </th>
				<th>票价</th>
				<th>类别</th>
				<th>上映日期</th>
				<th>时长</th>
				<th>导演</th>
				<th>
					安排
				</th>
				
			</tr>
			<tr ng-repeat="x in movie | filter:{name:by} | orderBy : orders">
				<td><input type="checkbox" ng-model="x.ck" /></td>
				<td>{{x.name}}</td>
				<td>{{x.price}}</td>
				<td>{{x.typea}}</td>
				<td>{{x.redDate|date:'yyyy-MM-dd hh:mm:ss'}}</td>
				<td>{{x.time}}分钟</td>
				<td>{{x.actor}}</td>
				<td>
					<input type="button" value="删除" ng-click="del($index)" />
					<input type="button" value="修改" ng-click="updS($index)" />
					
				</td>
			</tr>
		</table>
		
		<div ng-show="addShow">
			<h5>添加页面</h5>
			<p>电影名 ： <input type="text" ng-model="names" /></p>
			<p>票价 ： <input type="text" ng-model="prices" /></p>
			<p>类别 ： <input type="text" ng-model="types" /></p>
			<p>时间 ： <input type="text" ng-model="datas" /></p>
			<p>时间长： <input type="text" ng-model="times" /></p>
			<p>导演 ： <input type="text" ng-model="daoyan" /></p>
			<button ng-click="save()">保存</button>
		</div>
		<div ng-show="updShow">
			<h5>添加页面</h5>
			<p>电影名 ： <input type="text" ng-model="obj.names" /></p>
			<p>票价 ： <input type="text" ng-model="obj.prices" /></p>
			<p>类别 ： <input type="text" ng-model="obj.types" /></p>
			<p>时间 ： <input type="date" ng-model="obj.datas" /></p>
			<p>时间长： <input type="text" ng-model="obj.times" /></p>
			<p>导演 ： <input type="text" ng-model="obj.daoyan" /></p>
			<button ng-click="xiugai()">修改</button>
		</div>
		
	</body>

angular代码

<script>
		var vm=angular.module('myApp',[])
		        vm.controller('myCtrl',function($scope,$http){
					 $http.get("js/three.json").then(function(res){                        
						 //获取数据   ,  在json中 如果 中括号前有信息 就放在data 后面 ，如果没有 就不用放了
						     $scope.movie=res.data
						     //定义一个空对象来接受传值
						     $scope.obj={}
							var idx=-1
						     $scope.updS=function($index){
						     	$scope.updShow=true
						     	$scope.obj.names=$scope.movie[$index].name
						     	$scope.obj.prices=$scope.movie[$index].price
						     	$scope.obj.types=$scope.movie[$index].typea
						     	$scope.obj.datas=$scope.movie[$index].redDate
						     	$scope.obj.times=$scope.movie[$index].time
						     	$scope.obj.daoyan=$scope.movie[$index].actor
						     	
						     	idx=$index
						     	
						     }
						     
						     $scope.xiugai=function(){
						     	
						     	$scope.movie[idx].name=$scope.obj.names
						     	$scope.movie[idx].price=$scope.obj.prices
						     	$scope.movie[idx].typea=$scope.obj.types
						     	$scope.movie[idx].redDate=$scope.obj.datas
						     	$scope.movie[idx].time=$scope.obj.times
						     	$scope.movie[idx].actor=$scope.obj.daoyan
						     	
						     	$scope.updShow=false
						     	
						     }
						     //点击添加按钮添加模板出现
						     $scope.addAll=function(){
						     	$scope.addShow=true
						     	
						     }
						     $scope.save=function(){
						    var name=$scope.names
						    var price=$scope.prices
						    var type=$scope.types
						    var datea=$scope.datas
						    var time=$scope.times
						    var dao=$scope.daoyan
						    
						    $scope.movie.push({
						    	name:name,
						    	price:price,
						    	typea:type,
						    	redDate:datea,
						    	time:time,
						    	actor:dao
						    	
						    	
						    	
						    	
						    })
						     $scope.names=""
						 	 $scope.prices=""
						 	 $scope.types=""
						  	 $scope.datas=""
						  	 $scope.times=""
						  	 $scope.daoyan=""
						    
						     	$scope.addShow=false
						     	
						     }
						     
						     
						     
						     //全选反选
						     $scope.fx=function(){
						     	for (var i=0 ;i<$scope.movie.length ; i++) {
						     		$scope.movie[i].ck=!$scope.movie[i].ck
						     	}
						     	
						     	
						     }
						     
						     //批量删除
						     $scope.plsc=function(){
						     	for (var i=0 ;i<$scope.movie.length ;i++) {
						     		if ($scope.movie[i].ck==true) {
						     			$scope.movie.splice(i,1)
						     			i--
						     		}
						     		
						     	}
						     	
						     	
						     }
						     
						    //删除
						    
						   $scope.del=function(index){
						   		if (confirm("确定需要删除吗？")) {
						   			$scope.movie.splice(index,1)
						   		}
						   }
						   
						   
						   
						                    
					 })
						    
		        })
		    
	</script>

json数据

[
	{
		"name":"菊花与刀",
		"price":"30",
		"typea":"战争",
		"redDate":"12345647899",
		"time":"140",
		"actor":"田利明"
		
	},
	{
		"name":"我不是药神",
		"price":"40",
		"typea":"喜剧",
		"redDate":"444445845678",
		"time":"140",
		"actor":"王银鹏"
	},
	{
		"name":"侏罗纪世界2",
		"price":"38",
		"typea":"科幻",
		"redDate":"78945612348",
		"time":"150",
		"actor":"高帅帅"
		
	},
	{
		"name":"毒液",
		"price":"78",
		"typea":"科幻",
		"redDate":"4567813873564",
		"time":"240",
		"actor":"姚志强"
		
	}


]

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

scope