angular js 自写

最新推荐文章于 2024-11-13 15:53:10 发布

马龙德兰胜

最新推荐文章于 2024-11-13 15:53:10 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42045179/article/details/80164171

本文介绍了一个使用AngularJS实现的商品管理系统，该系统支持商品的增删改查操作，并具备批量删除和总价计算等功能。通过实际代码展示了如何利用AngularJS进行前端开发。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			angular.module("myApp",[]).controller("myCtrl",function ($scope,$http) {
				
				$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest").then(function (success) {
					$scope.goods=success.data;
				})
				$scope.flag=false;
				$scope.upd1=false;
				$scope.change=function(){
					var sk=$scope.ischecks;
					for (var i = 0; i < $scope.goods.length; i++) {
						$scope.goods[i].checked=sk;
					}
				}
				
				$scope.del=function (index) {
					$scope.goods.splice(index,1);					
				}
				
				$scope.save=function(){
					var id = $scope.id;
					var name = $scope.name;
					var price = $scope.price;
					var number= $scope.number;
					if(id==undefined||id==""){
						alert("编号不能为空");
						return;
					}
					if(name==undefined||name==""){
						alert("名称不能为空");
						return;
					}
					if(price==undefined||price==""){
						alert("价格不能为空");
						return;
					}
					if(number==undefined||number==""){
						alert("数量不能为空");
						return;
					}
					$scope.goods.push({
						id:id,
						name:name,
						price:price,
						number:number
					})
					$(".inp").val("")
					$scope.flag=false;
				}
				
				$scope.delAll=function () {
					for (var i = 0; i < $scope.goods.length; i++) {
						if($scope.goods[i].checked==true){
							$scope.goods.splice(i,1);
							i--;
						}
					}
				}
				$scope.upd=function(index){
					$scope.upd1=true;
					x=index;
					$scope.id1=$scope.goods[index].id;
					$scope.name1=$scope.goods[index].name;
					$scope.price1=$scope.goods[index].price;
					$scope.number1=$scope.goods[index].number;
				}
				$scope.save1=function(){
					$scope.goods[x].id=$scope.id1;
					$scope.goods[x].name=$scope.name1;
					$scope.goods[x].price=$scope.price1;
					$scope.goods[x].number=$scope.number1;
					$scope.upd1=false;
				}
				
				$scope.zong=function(){
					var sum=0;
					for (var i = 0; i <$scope.goods.length; i++) {
						sum=sum+$scope.goods[i].price*$scope.goods[i].number;
						
					}
					return sum;
				}
			})
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<input type="text" ng-model="selectName" placeholder="请输入您想要查询的内容"/>
		<button ng-click="flag=true">入库</button>
		<button ng-click="delAll()">批量删除</button>
		<table border="1px solid " style="width:1000px ;">
			<tr style="background-color: cornflowerblue;">
				<th><input type="checkbox" ng-model="ischecks" ng-change="change()" /> </th>
				<th>编号<button ng-click="px='id';sj=!sj">^</button> </th>
				<th>名称</th>
				<th>价格<button ng-click="px='price';sj=!sj">^</button> </th>
				<th>数量<button ng-click="px='number';sj=!sj">^</button> </th>
				<th>小计</th>
				<th>编辑</th>
			</tr>
			<tr ng-repeat="s in goods|filter:selectName|orderBy:px:sj">
				<th><input type="checkbox" ng-model="s.checked" /> </th>
				<th>{{s.id}}</th>
				<th>{{s.name}}</th>
				<th>{{s.price}}</th>
				<th>{{s.number}}</th>
				<th>{{s.number*s.price}}</th>
				<th><button ng-click="del($index)">删除</button><button ng-click="upd($index)">修改</button> </th>
			</tr>
		</table>
		<span>商品总价：{{zong()|currency:"￥"}}</span>
		<form ng-show="flag">
			<fieldset style="width: 1000px;">
				<legend>添加商品</legend>
				编号：<input type="text" ng-model="id" class="inp"/>
				名称：<input type="text" ng-model="name" class="inp" />
				价格：<input type="text" ng-model="price" class="inp" />
				数量：<input type="text" ng-model="number" class="inp" />
				<button ng-click="save()">保存</button>
			</fieldset>
		</form>
		<form ng-show="upd1">
			<fieldset style="width: 1000px;">
				<legend>修改商品</legend>
				编号：<input type="text" ng-model="id1" class="inp1"/>
				名称：<input type="text" ng-model="name1" class="inp1" />
				价格：<input type="text" ng-model="price1" class="inp1" />
				数量：<input type="text" ng-model="number1" class="inp1" />
				<button ng-click="save1()">修改</button>
			</fieldset>
		</form>
	</body>
</html>