angular 请求网络数据 展示table 查询关键字 过滤 删除 添加 修改

于 2018-01-12 14:26:36 发布
阅读量334 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 混合开发 文章标签： 查询关键字 过滤 删除 添加 修改 angular 请求网络数据 展示table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xujiuba/article/details/79043629
本文介绍了一个使用AngularJS实现的新闻管理系统，该系统具备从网络获取数据、搜索、排序、添加、删除及修改等功能。通过实战案例，展示了AngularJS在前端开发中的强大能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>日考15</title>
		<style>
			table tr:nth-child(even){
				background: #EEEEEE;
			}
			table tr:nth-child(add){
				background: #FFFFFF;
			}
			
		</style>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script>
			var app = angular.module("myapp",[]);
			app.controller("myctrl",function($scope,$http){
				//通过http内置服务    请求网络数据    展示
				$scope.jsonFromNet="";
				$http({
					method:"get",
					url:"http://gank.io/api/data/Android/10/1"
				}).then(function success(response){
					//获取到网络请求的数据
					$scope.jsonFromNet=response.data;
				});
				//搜素条件
				$scope.search = "";
				//排序
				$scope.orderByKey = "";
				//删除
				$scope.showTitle = true;
				$scope.deleteGood = function($index){
					$scope.jsonFromNet.results.splice($index,1);
					if(jsonFromNet.results.length == 0){
						//隐藏表头
						 $scope.showTitle = false;
					}
				}
				//点击添加新闻  
				$scope.ifFlag = false;
				//是否显示添加区域
				$scope.ifadd = function(){
					$scope.ifFlag = !$scope.ifFlag;
					$scope.ifFlag2 = false;
				}
				//获取要添加的值
				$scope.newtype ="";
				$scope.newsource ="";
				$scope.newwho ="";
				//添加数据
				$scope.addGood = function(){
						//将要添加的数据封装成一个对象
						var good={
							type:$scope.newtype, 
							source:$scope.newsource,
							createdAt:new Date(),
							who:$scope.newwho
						};
						//将添加的数据赋值给表的属性
						$scope.jsonFromNet.results.push(good);
							//添加完后,自动隐藏输入区域
							$scope.ifFlag = false;
					}
				
				//点击修改    弹出修改框
				$scope.ifFlag2 = false;
				$scope.updateGood = function($index){
					//显示修改区域
					$scope.ifFlag2 =!$scope.ifFlag2 ;
					$scope.ifFlag = false;
					$scope.updateIndex = $index;
					
					$scope.newtype = $scope.jsonFromNet.results[$index].type;
					$scope.newsource = $scope.jsonFromNet.results[$index].source;
					$scope.newwho = $scope.jsonFromNet.results[$index].who;

				}
				
				$scope.updateGood2 = function(updateIndex){
					$scope.jsonFromNet.results[$scope.updateIndex].type = $scope.newtype;
					$scope.jsonFromNet.results[$scope.updateIndex].source =$scope.newsource;
					$scope.jsonFromNet.results[$scope.updateIndex].who = $scope.newwho;
					$scope.ifFlag2 = false;

				}
			});
		</script>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
		<center>
			<h3 style=" width: 200px; background-color: #009900 ;">IT权威新闻</h3>
			    
			<input type="text" ng-model="search" placeholder="请输入查询关键字" />  
			<select ng-model="orderByKey">
				<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="ifadd()" />
			<table border="1px solid" cellpadding="0" cellspacing="0" ng-show="showTitle">
				<tr style="background-color: dimgray;">
					<td>序号</td>
					<td ng-click="orderByKey='type">type</td>
					<td>source</td>
					<td  ng-click="orderByKey='createdAt'">createdAt</td>
					<td>who</td>
					<td>操作</td>
				</tr>
				<tr ng-repeat="g in jsonFromNet.results | orderBy:orderByKey | filter:search">
					<td>{{$index}}</td>
					<td>{{g.type}}</td>
					<td>{{g.source}}</td>
					<td>{{g.createdAt}}</td>
					<td>{{g.who}}</td>
					<td>
						<input type="button" value="删除" ng-click="deleteGood($index)" />
						<input type="button" value="修改" ng-click="updateGood($index)"  />
					</td>
				</tr>
			</table><br /><br />
			<div ng-show="ifFlag">
				type:<input type="text" placeholder="请输入type" ng-model="newtype" /><br /><br />
				source:<input type="text" placeholder="请输入source" ng-model="newsource" /><br /><br />
				who:<input type="text" placeholder="请输入who" ng-model="newwho"/><br /><br />
				    <input type="button" ng-click="addGood();"  value="提交" />
			</div>
			<div ng-show="ifFlag2">
				type:<input type="text" placeholder="请输入type" ng-model="newtype" /><br /><br />
				source:<input type="text" placeholder="请输入source" ng-model="newsource" /><br /><br />
				who:<input type="text" placeholder="请输入who" ng-model="newwho"/><br /><br />
				    <input type="button" id="btn1" ng-click="updateGood2();"  value="修改" />
			</div>
		</center>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>日考15</title>
		<style>
			table tr:nth-child(even){
				background: #EEEEEE;
			}
			table tr:nth-child(add){
				background: #FFFFFF;
			}
			
		</style>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script>
			var app = angular.module("myapp",[]);
			app.controller("myctrl",function($scope,$http){
				//通过http内置服务    请求网络数据    展示
				$scope.jsonFromNet="";
				$http({
					method:"get",
					url:"http://gank.io/api/data/Android/10/1"
				}).then(function success(response){
					//获取到网络请求的数据
					$scope.jsonFromNet=response.data;
				});
				//搜素条件
				$scope.search = "";
				//排序
				$scope.orderByKey = "";
				//删除
				$scope.showTitle = true;
				$scope.deleteGood = function($index){
					$scope.jsonFromNet.results.splice($index,1);
					if(jsonFromNet.results.length == 0){
						//隐藏表头
						 $scope.showTitle = false;
					}
				}
				//点击添加新闻  
				$scope.ifFlag = false;
				//是否显示添加区域
				$scope.ifadd = function(){
					$scope.ifFlag = !$scope.ifFlag;
					$scope.ifFlag2 = false;
				}
				//获取要添加的值
				$scope.newtype ="";
				$scope.newsource ="";
				$scope.newwho ="";
				//添加数据
				$scope.addGood = function(){
						//将要添加的数据封装成一个对象
						var good={
							type:$scope.newtype, 
							source:$scope.newsource,
							createdAt:new Date(),
							who:$scope.newwho
						};
						//将添加的数据赋值给表的属性
						$scope.jsonFromNet.results.push(good);
							//添加完后,自动隐藏输入区域
							$scope.ifFlag = false;
					}
				
				//点击修改    弹出修改框
				$scope.ifFlag2 = false;
				$scope.updateGood = function($index){
					//显示修改区域
					$scope.ifFlag2 =!$scope.ifFlag2 ;
					$scope.ifFlag = false;
					$scope.updateIndex = $index;
					
					$scope.newtype = $scope.jsonFromNet.results[$index].type;
					$scope.newsource = $scope.jsonFromNet.results[$index].source;
					$scope.newwho = $scope.jsonFromNet.results[$index].who;

				}
				
				$scope.updateGood2 = function(updateIndex){
					$scope.jsonFromNet.results[$scope.updateIndex].type = $scope.newtype;
					$scope.jsonFromNet.results[$scope.updateIndex].source =$scope.newsource;
					$scope.jsonFromNet.results[$scope.updateIndex].who = $scope.newwho;
					$scope.ifFlag2 = false;

				}
			});
		</script>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
		<center>
			<h3 style=" width: 200px; background-color: #009900 ;">IT权威新闻</h3>
			    
			<input type="text" ng-model="search" placeholder="请输入查询关键字" />  
			<select ng-model="orderByKey">
				<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="ifadd()" />
			<table border="1px solid" cellpadding="0" cellspacing="0" ng-show="showTitle">
				<tr style="background-color: dimgray;">
					<td>序号</td>
					<td ng-click="orderByKey='type">type</td>
					<td>source</td>
					<td  ng-click="orderByKey='createdAt'">createdAt</td>
					<td>who</td>
					<td>操作</td>
				</tr>
				<tr ng-repeat="g in jsonFromNet.results | orderBy:orderByKey | filter:search">
					<td>{{$index}}</td>
					<td>{{g.type}}</td>
					<td>{{g.source}}</td>
					<td>{{g.createdAt}}</td>
					<td>{{g.who}}</td>
					<td>
						<input type="button" value="删除" ng-click="deleteGood($index)" />
						<input type="button" value="修改" ng-click="updateGood($index)"  />
					</td>
				</tr>
			</table><br /><br />
			<div ng-show="ifFlag">
				type:<input type="text" placeholder="请输入type" ng-model="newtype" /><br /><br />
				source:<input type="text" placeholder="请输入source" ng-model="newsource" /><br /><br />
				who:<input type="text" placeholder="请输入who" ng-model="newwho"/><br /><br />
				    <input type="button" ng-click="addGood();"  value="提交" />
			</div>
			<div ng-show="ifFlag2">
				type:<input type="text" placeholder="请输入type" ng-model="newtype" /><br /><br />
				source:<input type="text" placeholder="请输入source" ng-model="newsource" /><br /><br />
				who:<input type="text" placeholder="请输入who" ng-model="newwho"/><br /><br />
				    <input type="button" id="btn1" ng-click="updateGood2();"  value="修改" />
			</div>
		</center>
	</body>
</html>





                

        

    

    
  



    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值