使用AngularJS实现网页页面上的增、删、查_angularjs中新增和删除功能的总结-优快云博客

本文链接：https://blog.youkuaiyun.com/zjc_null/article/details/79059125

本文介绍如何使用AngularJS实现网页应用中的增、删、查功能。通过实例演示了如何加载AngularJS库，初始化数据，以及实现入库、删除、查询等业务逻辑。

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

使用AngularJS实现网页页面上的增、删、查

首先，导入AngularJS第三方jar包，在这里，我使用的是第三方jar包，还可以使用网络上获取的jar包

		<script type="text/javascript" src="libs/angular.min.js" ></script>
		<script type="text/javascript" src="libs/angular-route.min.js" ></script>

下面是一些angularjs逻辑操作代码

<script>
			var app = angular.module("MyApp",[]);
			app.controller("Mycon",function($scope){
				//获取系统当前时间
				var aa = new Date();
				//初始化数据,json格式数据（自定义数据）
				$scope.goods = [
						{
							"names":"云南白药",
							"numbers":"100",
							"louders":"云南",
							"prices":"19.9",
							"datas":aa
						},
						{
							"names":"999感冒灵",
							"numbers":"30",
							"louders":"北京",
							"prices":"12.5",
							"datas":aa
						},
						{
							"names":"感康",
							"numbers":"20",
							"louders":"河北",
							"prices":"16.9",
							"datas":aa
						},
						{
							"names":"办案跟",
							"numbers":"120",
							"louders":"河北",
							"prices":"16.9",
							"datas":aa
						}
				];
				
				//入库的按钮点击事件
				$scope.rk = function(){
					//sos等于true的目的是，点击入库按钮，使下方的新增数据展示出来，它默认是不展示的
					$scope.sos = true;
				}
				//把初始化的数据赋值给goodis，是为了下面点击保存时，只需保存一个对象
				$scope.goodis = $scope.goods;
				
				//点击保存的点击事件
				$scope.bc = function(){
					//sos等于false的目的是点击保存按钮，使下方的新增数据再隐藏起来
					$scope.sos = false;
					//把从输入框中获取到的值重新给数据赋值
					$scope.goodis ={
						"names":$scope.n,
						"numbers":$scope.num,
						"louders":$scope.loud,
						"prices":$scope.p,
						"datas":aa
					};
					//点击把新增的数据通过push()方法增加到table表格中
					$scope.goods.push($scope.goodis);
				}
				
				
				
				//点击删除的点击事件
				$scope.remove = function(index){
					$scope.goods.splice(index,1);
					if($scope.goods.length==0){
						alert("库存为空");
					}
				}
				
				//点击查询的点击事件
				$scope.cx = function(){
					$scope.zz = [];
					var txt = $scope.txt;
					if(txt==""||txt==null){
						alert("您输入的为空");
					}else{
						for(var i = 0 ; i < $scope.goods.length;i++){
						    names = $scope.goods[i].names;
							if(names.indexOf(txt)!=-1){
							   $scope.zz.push($scope.goods[i]);
							   $scope.goods = $scope.zz;
							}else{
								
								if(i==1){
									alert("您输入的物品好像不存在哎！");
								}
								
							}
					    }
					
							
					}
					
				}
				//这是下拉框的改变事件，原理是冒泡排序
				$scope.cc = function(){
					if($scope.op=="--排序--"){
						
					}else if($scope.op=="按数量正序"){
						$scope.goods.sort(function(a,b){
						    return a.numbers - b.numbers;
					    });
					}else{
						$scope.goods.sort(function(a,b){
						    return b.numbers - a.numbers;
					    });
					}
					
				}
				
			});
		</script>

下面是html中的布局代码

<body ng-controller="Mycon">
		<h1>商品库存管理系统</h1><br />
		<input type="text" placeholder="请输入关键词" ng-model="txt" />
		<input type="button" value="查询" ng-click="cx()" />
		  
		<select ng-change="cc()" ng-model="op">
			<option>--排序--</option>
			<option>按数量倒序</option>
			<option>按数量正序</option>
		</select>
		            
		<input id="rkbut" type="button" value="入库" ng-click="rk()" /><br /><br />
		<table class="tab" border="1" cellpadding="0" cellspacing="0" width="500px">
			<tr style="background-color: darkcyan;">
				<td>货物名称</td>
				<td>货物数量</td>
				<td>货物产地</td>
				<td>货物单价</td>
				<td>货物的生产日期</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="good in goods">
				<td>{{good.names}}</td>
				<td>{{good.numbers}}</td>
				<td>{{good.louders}}</td>
				<td>{{good.prices | currency:'￥'}}</td>
				<td>{{good.datas | date:'yyyy-MM-dd HH:mm:ss'}}</td>
				<td><input type="button" value="删除" ng-click="remove($index)"/></td>
			</tr>
		</table>
		<br />
		<fieldset style="border: 1px solid darkgreen; width: 500px;" ng-show="sos">
			<legend>新增球员</legend>
			<table border="0">
				<tr>
					<td>货物名称</td>
					<td><input type="text" ng-model="n" /></td>
				</tr>
				<tr>
					<td>货物数量</td>
					<td><input type="text" ng-model="num" /></td>
				</tr>
				<tr>
					<td>货物产地</td>
					<td><input type="text" ng-model="loud" /></td>
				</tr>
				<tr>
					<td>货物单价</td>
					<td><input type="text" ng-model="p" /></td>
				</tr>
				<tr>
					<td><input type="button" value="保存" ng-click="bc()"/></td>
					
				</tr>
			</table>
		</fieldset>
	</body>