Angular项目

最新推荐文章于 2020-07-25 12:04:39 发布

ChenYatong_129

最新推荐文章于 2020-07-25 12:04:39 发布

阅读量433

点赞数

分类专栏：混合开发文章标签： Angular

本文链接：https://blog.csdn.net/qq_41623299/article/details/79045049

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/angular-route.js" ></script>
		<title></title>
		<style>
			table tr:nth-child(even){
				background: burlywood;
			}
			table tr:nth-child(odd){
				background: cadetblue;
			}
		</style>
		<script>
			var app=angular.module("myApp",[]);
			app.controller("myCtrl",function($scope,$http){
				
				$scope.jsonData="";
				//网络请求数据
				$http({
					method:"get",
					url:"http://gank.io/api/data/Android/10/1"
				}).then(function success(response){
					$scope.jsonData=response.data;//获取到网络请求的数据
				},function error(response){
					
				});
				
				
				//排序
				$scope.orderKey="";
				//过滤
				$scope.search="";
				//删除
				$scope.showtable=true;
				
				$scope.del=function($index){
					$scope.jsonData.results.splice($index,1);
				if($scope.jsonData.results.length==0){
					//隐藏表
					$scope.showtable=false;
				}
				}
				
				$scope.ifdiv=false;
				$scope.addnews=function(){
					//点击添加新闻  显示添加框
					$scope.ifdiv=!$scope.ifdiv;
						$scope.ifdiv2=false;
				}
				//获取要添加的值
				$scope.newtype="";
				$scope.newsource="";
				$scope.newwho="";
				$scope.newcreatedAt="";
				
				//添加数据
				$scope.addinfo=function(){
					//将要添加的数据封装成一个对象
					var newsdata={
						type:$scope.newtype,
						source:$scope.newsource,
						createdAt:new Date(),
						who:$scope.newwho
						
					}
					//将添加的数据赋值给表的属性
					$scope.jsonData.results.push(newsdata);
					//点击添加  添加框消失
					$scope.ifdiv=false;
					$scope.showtable=true;
				
				}
				
				//点击修改  弹出修改框
				$scope.ifdiv2=false;
				$scope.myupdate=function($index){
					$scope.ifdiv2=true;
					$scope.i=$index;
					
					$scope.newtype=$scope.jsonData.results[$index].type;
					$scope.newsource=$scope.jsonData.results[$index].source;
					$scope.newcreatedAt=$scope.jsonData.results[$index].createdAt;
					$scope.newwho=$scope.jsonData.results[$index].who;
					$scope.ifdiv=false;
				}
				//修改框中的修改
				$scope.updateinfo=function(){
					$scope.jsonData.results[$scope.i].type=$scope.newtype;
					$scope.jsonData.results[$scope.i].source=$scope.newsource;
					$scope.jsonData.results[$scope.i].createdAt=$scope.newcreatedAt;
					$scope.jsonData.results[$scope.i].who=$scope.newwho;
			        $scope.ifdiv2=false;
				}
				
			});
			
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
	<center>
		<h3 style="width: 160px; height: 25px; background: green;">IT权威新闻</h3>
		<input type="text" ng-model="search" placeholder="请输入查询关键字"/>
		<select ng-model="orderKey">
			<option value="">--请选择--</option>
			<option value="createdAt">时间升序</option>
			<option value="-createdAt">时间降序</option>
			<option value="type">type升序</option>
			<option value="-type">type降序</option>
		</select>
		<input type="button" value="添加新闻" ng-click="addnews();"/>
		<br /><br />
		<table  ng-show="showtable" border="1" cellpadding="0" cellspacing="0">
			<tr style="background: darkgrey;">
				<th>序号</th>
				<th ng-click="orderKey='type'">
					type
				</th>
				<th>source</th>
				<th>createdAt</th>
				<th >who</th>
				<th>操作</th>
			</tr>
			<tr ng-repeat="d in jsonData.results | orderBy:orderKey | filter:search">
				<td>{{$index}}</td>
				<td>{{d.type}}</td>
				<td>{{d.source}}</td>
				<td>{{d.createdAt}}</td>
				<td>{{d.who}}</td>
				<td>
					<input type="button" value="删除" ng-click="del($index);"/>
					<input type="button" value="修改" ng-click="myupdate($index);"/>
				
				</td>
				
			</tr>
		</table><br /><br />
		<div ng-show="ifdiv">
			type:<input type="text" ng-model="newtype"/><br />
			source:<input type="text" ng-model="newsource" /><br />
			createdAt:<input type="text" ng-model="newcreatedAt"/><br />
			who:<input type="text" ng-model="newwho"/><br />
		  <input type="button" value="添加" ng-click="addinfo();"/>
		</div>
		<div ng-show="ifdiv2">
			type:<input type="text" ng-model="newtype"/><br />
			source:<input type="text" ng-model="newsource" /><br />
			createdAt:<input type="text" ng-model="newcreatedAt"/><br />
			who:<input type="text" ng-model="newwho"/><br />
		  <input type="button" value="修改" ng-click="updateinfo();"/>
		</div>
		
	</center>
	</body>
</html>