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

最新推荐文章于 2020-05-25 06:55:52 发布
最新推荐文章于 2020-05-25 06:55:52 发布
阅读量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>





                

        

    

    
  



    



                



	

		

			

				
					
angular2接口查询后渲染到表格

				
			

			

				

					web
				

				

					06-01
					
					985
					
				

			

		

		

			
				
我记的笔记，可能有不对的
1、在service里写接口请求(planser.service.ts)
get请求：
// 获取表格信息
  getinfo(supplementId, year, maxResultCount, skipCount) {
    return this.http.get<string>(`${apiUrl}/ProjectInfo/GetProInfoManagementInfos`, {
      headers: {
      authorization: 

			
		

	



                

            
              



	

		

			

				
					
Angular Material Mat Table的dataSource变化时不会自动刷新

				
			

			

				

					yorksome的博客
				

				

					08-17
					
					2598
					
				

			

		

		

			
				
Mat Table的dataSource 改变时，mat-table 不会自动更新，但是mat expansion panel 可以自动侦测数据源变化。
解决办法是，可以给table一个#名字 用ViewChild()获取这个table 然后手动 table.renderRows() 方法来刷新table。
<table mat-table #table [dataSource]="data...

			
		

	



              


  
              

                


	

		

			

				
					
angular table的添加搜索

				
			

			

				

					yedaiyang的博客
				

				

					12-19
					
					631
					
				

			

		

		

			
				
资产登记
  
   
    资产编号
    资产名称
    资产数量
   
   
    {{g.id}}
    {{g.name}}
    {{g.count}}
   
  
  资产搜索:
  
  资产添加
  资产编号:
  资产名称:
  资产数量:
  
  
 
 
 
  var mo = angular.modul

			
		

	





	

		

			

				
					
angularJS添加表格，通过过滤器查找

				
			

			

				

					w98326angle的博客
				

				

					11-19
					
					445
					
				

			

		

		

			
				
table{
    margin-top: 20px;
   }
   .table1{
    width: 600px;
   }
  
  
  
 
 
  var app = angular.module("myApp", []);  
 app.controller("myCtrl", function($scope) {  
  //定义数组 
    

			
		

	



		

			
		



	

		

			

				
					
angular做的一个表单带删除排序，搜索等功能

				
			

			

				

					山外小楼
				

				

					05-31
					
					1019
					
				

			

		

		

			
				
自学的angular做的一个关于表单的小DOM

			
		

	





	

		

			

				
					
【前端数据展示革新】：Bootstrap table多层表头案例全解析

				
			

			

				

					
				

			

		

		

			
				
![技术专有名词：Bootstrap table]...本文旨在深入探讨前端数据展示的基础知识，特别是Bootstrap Table组件的安装、配置与多层表头的构建及应用。文章首先介绍了Bootstrap Table的基础概念和初始化配置，随后详细阐

			
		

	





	

		

			

				
					
【前端数据展示新趋势】：Bootstrap-Table与Treegrid的融合与创新应用

				
			

			

				

					
				

			

		

		

			
				
![【前端数据展示新趋势】：Bootstrap-Table与Treegrid的融合与创新应用]... # 摘要 随着前端技术的快速发展，前端数据展示已成为构建现代Web应用不可或缺的一部分。本文首先概述了前端数据展示的基本概念，随后深入...

			
		

	





	

		

			

				
					
SAP Table Control数据绑定与更新机制：高效数据处理的秘诀

				
			

			

				

					
				

			

		

		

			
				
![SAP Table Control数据绑定与更新机制：高效数据处理的秘诀]...通过对数据绑定的理论与实践分析，本文展示了如何在SAP系统中高效地利用Table Control进行数据处理，并详细讨论了更新机制的工作原理

			
		

	





	

		

			

				
					
【数据展示艺术】：jqGrid数据绑定与高效展示秘籍

				
			

			

				

					
				

			

		

		

			
				
![【数据展示艺术】：jqGrid数据绑定与高效展示秘籍]...接着，文章阐述了数据展示的高级技巧，如数据格式化、排序筛选优化和用户体验增强

			
		

	





	

		

			

				
					
【实时监控系统的高效数据展示】

				
			

			

				

					
				

			

		

		

			
				
本文首先概述了实时监控系统及其数据展示的理论基础，随后深入探讨了数据展示的实践，包括实时数据流的处理和图表图形的实现。文章还探讨了高效数据展示的技术实现，包括响应式网页设计和前端与后端数据处理优化。...

			
		

	





	

		

			

				
					
AngularJS中$http服务的简单用法

				
			

			

				

					qian_xiaona的博客
				

				

					03-21
					
					581
					
				

			

		

		

			
				
我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

1、链式调用
$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的
配置内容。这个函数返回一个promise对象，具有success和error两个方法。

$http({
url:'data.json',
meth

			
		

	





	

		

			

				
					
angular api管理_使用Angular和API服务器显示相关表中的数据

				
			

			

				

					danpu0978的博客
				

				

					05-25
					
					662
					
				

			

		

		

			
				
angular api管理 Angular是基于Angular JS并扩展其原理的动态Web应用程序的更新框架。 CData API Server使您可以为80多个数据源（包括本地数据库和基于云的数据库）生成REST API。 本文将逐步设置CData API服务器 ，以为QuickBooks Online数据创建基于OData的REST API，并创建一个可以实时访问QuickBooks On...

			
		

	





	

		

			

				
					
angularJS中使用过滤器格式化数据

				
			

			

				

					fushibin888的博客
				

				

					08-17
					
					350
					
				

			

		

		

			
				

在angularJS中，你可自己定义过滤器来格式化数据，下面举个例子：
 过滤器允许你什么如何将展示给用户的数据转换后插入到你的模板中。
过滤器的使用语法是：
{{ expression | filterName : parameter1 : ...parameterN }}
其中expression表示任何Angular表达式，filterName是你想用的过滤器名称，传递给过滤器的参...

			
		

	





	

		

			

				
					
angularjs常见页面查询功能

				
			

			

				

					Irmhy
				

				

					09-28
					
					8392
					
				

			

		

		

			
				
2016年9月28日。


昨天学习了如何用mongoose写后端数据单一数据&组合数据的接口，今天便来讲讲如何根据后端写好的接口，来写前端数据接口，获取数据并进行查询。


查询出来的数据大概就是这样一个显示方式，查询也就是简单的input输入框


此时第一步需要在service中获取数据：
getidnum: function (idnum) {
            

			
		

	





	

		

			

				
					
基于Django的网络设备租赁系统设计与实现-z78dv873【附万字论文+PPT+包部署+录制讲解视频】.zip

				
			

			

				

					08-06
				

			

		

		

			
				
基于Django的网络设备租赁系统设计与实现-z78dv873【附万字论文+PPT+包部署+录制讲解视频】.zip

			
		

	





	

		

			

				
					
模型过拟合与欠拟合解决方案.doc

				
			

			

				

					08-06
				

			

		

		

			
				
模型过拟合与欠拟合解决方案.doc

			
		

	





	

		

			

				
					
“经典动态规划问题过河卒代码实现”

					
最新发布

				
			

			

				

					08-06
				

			

		

		

			
				
资源下载链接为：
https://pan.quark.cn/s/abbae039bf2a
在棋盘上，A点有一枚过河卒，目标是抵达B点。卒的移动方式仅限于向下或向右行进。然而，棋盘上存在一个对方的马（比如C点的马），马所在的点以及它能一步跳跃到达的所有点都属于对方马的控制范围。以C点的马为例，它能控制9个点（包括C点本身以及图示的P1至P8）。卒在行进过程中，不能经过对方马的任何控制点。


			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值