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

最新推荐文章于 2021-09-18 18:07:32 发布
最新推荐文章于 2021-09-18 18:07:32 发布
阅读量293 收藏
点赞数
分类专栏： 混合开发 文章标签： 查询关键字 过滤 删除 添加 修改 angular 请求网络数据 展示table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xujiuba/article/details/79043629
版权 
<!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>








                

        

        

    

  


    

      

        

            

              
                
                  xujiuba
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
2023年前端面试汇总-React

				
			

			

				

					越陌度阡
				

				

					06-29
					
					825
					
				

			

		

		

			
				
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

			
		

	



                

              
                



	

		

			

				
					
----- 前端面试题 -----

				
			

			

				

					weixin_53170812的博客
				

				

					07-30
					
					616
					
				

			

		

		

			
				
HTML5新增的元素

首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和w

			
		

	



                


  
              

                


	

		

			

				
					
angular table的添加搜索

				
			

			

				

					yedaiyang的博客
				

				

					12-19
					
					579
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					w98326angle的博客
				

				

					11-19
					
					399
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					山外小楼
				

				

					05-31
					
					989
					
				

			

		

		

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

			
		

	





	

		

			

				
					
angular2接口查询后渲染到表格

				
			

			

				

					web
				

				

					06-01
					
					941
					
				

			

		

		

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

			
		

	





	

		

			

				
					
【从入门到精通】：JavaScript与JSON数据结构的实战秘籍

				
			

			

				

					
				

			

		

		

			
				
[【从入门到精通】：JavaScript与JSON数据结构的实战秘籍](https://parzibyte.me/blog/wp-content/uploads/2018/12/Codificar-y-decodificar-JSON-en-JavaScript-y-Node-JS-1024x537.png) # 1. JavaScript与JSON概述...

			
		

	





	

		

			

				
					
Vue基础6天实施笔记

				
			

			

				

					weixin_44867717的博客
				

				

					02-09
					
					1924
					
				

			

		

		

			
				
Vue 基础课程
课程介绍
Vue基础语法
指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器
axios、ES6模块化、组件、vue单文件组件、WebStorage
SPA单页应用、router路由、Promise
VueCLI脚手架、element-ui组件库、eslint代码规范检测等等
vue介绍
三大前端框架
Vue
Vue.js (view)是一...

			
		

	





	

		

			

				
					
工作中遇到的问题(DS)

				
			

			

				

					卷NM呢！不干了！
				

				

					09-18
					
					951
					
				

			

		

		

			
				
@RequestParam用法(非必填)加与不加的区别
https://blog.csdn.net/u013805360/article/details/79527175



			
		

	





	

		

			

				
					
AngularJS中$http服务的简单用法

				
			

			

				

					qian_xiaona的博客
				

				

					03-21
					
					534
					
				

			

		

		

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

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

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

			
		

	





	

		

			

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

				
			

			

				

					danpu0978的博客
				

				

					05-25
					
					593
					
				

			

		

		

			
				
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
					
					314
					
				

			

		

		

			
				

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

			
		

	





	

		

			

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

				
			

			

				

					yorksome的博客
				

				

					08-17
					
					2493
					
				

			

		

		

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

			
		

	





	

		

			

				
					
angularjs常见页面查询功能

				
			

			

				

					Irmhy
				

				

					09-28
					
					8333
					
				

			

		

		

			
				
2016年9月28日。


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


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


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

			
		

	





	

		

			

				
					
基于大模型技术的算力产业监测服务平台设计

				
			

			

				

					09-17
				

			

		

		

			
				
内容概要：本文提出了一种新型算力产业监测服务平台的设计理念，运用国内自主研发的大模型技术支持，通过对传统技术的改进和完善，提出了三层架构的设计方法，即基础设施层（含向量数据库和模型训练）、大模型应用框架层（强化数据处理与多维关系挖掘）及业务层（如智能分析助手）。这种设计方案旨在提高算力产业发展监测与决策制定的质量。
适合人群：电信行业的从业人员及研究人员；算力产业链各环节管理者；政府相关机构和政策决策者。
使用场景及目标：在多种算力相关的应用场景（如云计算中心管理，数据中心监测，政策分析）中辅助决策者进行快速有效的信息获取和技术选择；助力算力产业发展方向的精确把控和战略调整。
其他说明：随着大模型技术的日臻成熟，该算力产业监测服务平台预计将进一步丰富自身的应用领域和服务深度，以促进算力行业更智慧化发展。


			
		

	





	

		

			

				
					
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot.zip

					
最新发布

				
			

			

				

					09-17
				

			

		

		

			
				
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot

			
		

	





	

		

			

				
					
Angular全功能实例：搜索、过滤、删除、添加与表单验证

				
			

			

				

					
				

			

		

		

			
				
本篇文章将深入探讨Angular框架中的多个核心功能，包括搜索、过滤、批量删除、添加以及表单验证，旨在帮助开发者提升在实际项目中利用Angular进行用户界面操作的效率。以下是主要内容的详细介绍：  1. **搜索功能**...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值