angular js 月考模拟

最新推荐文章于 2021-12-09 21:25:30 发布

马龙德兰胜

最新推荐文章于 2021-12-09 21:25:30 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/qq_42045179/article/details/80164146

版权

<!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>
		<style type="text/css">
			a{
				text-decoration: none;
				color: black;
			}
		</style>
		<script type="text/javascript">
			angular.module("myApp",[]).controller("myCtrl",function($scope,$http){
				
				$http.get("phone.json").then(function(success){
					
					$scope.phones=success.data;
					
				});
				$scope.flag=false;
				$scope.flag1=false;
				
				$scope.select=function(){
					$scope.selName=$scope.selectName;
				}
				
				$scope.add=function(){
					name=$scope.name;
					price=$scope.price;
					number=$scope.number;
					sells=$scope.sells;
					if(name==undefined||name==""){
						alert("名称不能为空");
						return;
					}
					if(price==undefined||price==""){
						alert("价格不能为空");
						return;
					}
					if(number==undefined||number==""){
						alert("库存不能为空");
						return;
					}
					if(sells==undefined||sells==""){
						alert("销量不能为空");
						return;
					}
					
					$scope.phones.push({
						name:name,
						price:price,
						number:number,
						sells:sells
					})
					
					$(".inp").val("");
					$scope.flag=false;
				}
				
				$scope.delAll=function(){
					
					x=0;
					for (var i = 0; i < $scope.phones.length; i++) {
						if($scope.phones[i].checked==true){
							x++;
						}
					}
					
					if(x>0){
						for (var i = 0; i < $scope.phones.length; i++) {
						
						if($scope.phones[i].checked==true){
							$scope.phones.splice(i,1);
							i--;
						}
						$scope.ischecks=false;
					}
					}else{
						alert("请选择数据");
					}
					
					
				}
				
				$scope.buy=function(index){
					if($scope.phones[index].number==0){
						alert("库存不足");
					}else{
						$scope.phones[index].number--;
						$scope.phones[index].sells++;
					}
				}
				
				$scope.upd=function(index){
					$scope.flag1=true;
					x=index;
					$scope.name1=$scope.phones[index].name;
					$scope.price1=$scope.phones[index].price;
					$scope.number1=$scope.phones[index].number;
					$scope.sells1=$scope.phones[index].sells;
				}
				
				$scope.save=function(){
					$scope.phones[x].name=$scope.name1;
					$scope.phones[x].price=$scope.price1;
					$scope.phones[x].number=$scope.number1;
					$scope.phones[x].sells=$scope.sells1;
					$scope.flag1=false;
				}
				
				$scope.change=function(){
					var sk=$scope.ischecks;
					for (var i = 0; i < $scope.phones.length; i++) {
						$scope.phones[i].checked=sk;
					}
				}
				
			})
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<input type="text" placeholder="请输入关键字" ng-model="selectName" />
		<input type="button" value="搜索" ng-click="select()" />
		<input type="button" value="添加商品" ng-click="flag=true" />
		<input type="button" value="删除/批量删除" ng-click="delAll()"/>
		<table border="1px solid black" width="1000px">
			<tr>
				<th><input type="checkbox" ng-model="ischecks" ng-change="change()"/> </th>
				<th>商品名称</th>
				<th>商品价格<button ng-click="px='price';sj=!sj">排序</button> </th>
				<th>商品库存<button ng-click="px='number';sj=!sj">排序</button></th>
				<th>商品销量<button ng-click="px='sells';sj=!sj">排序</button> </th>
				<th>操作</th>
			</tr>
			<tr ng-repeat="s in phones|filter:selName|orderBy:px:sj">
				<th><input type="checkbox" ng-model="s.checked" /> </th>
				<th>{{s.name}}</th>
				<th>{{s.price|currency:"￥"}}</th>
				<th>{{s.number}}</th>
				<th>{{s.sells}}</th>
				<th><a href="#" ng-click="buy($index)">购买</a>|<a href="#" ng-click="upd($index)">修改</a> </th>
			</tr>
		</table>
		<form ng-show="flag">
			<fieldset style="width: 1000px;">
				<legend>添加商品</legend>
				商品名称：<input type="text" ng-model="name" class="inp" />
				商品价格：<input type="text" ng-model="price" class="inp" />
				商品库存：<input type="text" ng-model="number" class="inp" />
				商品销量：<input type="text" ng-model="sells" class="inp" />
				<button ng-click="add()">点击添加</button>				
			</fieldset>
		</form>
		<form ng-show="flag1">
			<fieldset style="width: 1000px;">
				<legend>修改商品</legend>
				商品名称：<input type="text" ng-model="name1" class="inp1" />
				商品价格：<input type="text" ng-model="price1" class="inp1" />
				商品库存：<input type="text" ng-model="number1" class="inp1" />
				商品销量：<input type="text" ng-model="sells1" class="inp1" />
				<button ng-click="save()">点击保存</button>				
			</fieldset>
		</form>
	</body>
</html>

马龙德兰胜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 月考模拟

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../../js/angular.min.js" type="text/javascript&quot
复制链接

扫一扫