商品列表_mui 商品列表-CSDN博客

本文链接：https://blog.csdn.net/qq_39753947/article/details/78232211

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="js/angular.js"></script>
	<script type="text/javascript">
	var app=angular.module("myApp",[]);
	app.controller("myCtrl",function($scope){
	$scope.shuzu=[
	{
	"bianhao":1234,
	"name":"ipad",
	"price":200,
	"num":10
	},
	{
	"bianhao":1334,
	"name":"ipad",
	"price":3000,
	"num":15
	},
	{
	"bianhao":1264,
	"name":"ipad",
	"price":555,
	"num":10
	},
	{
	"bianhao":184,
	"name":"ipad",
	"price":5555,
	"num":13
	}
	];
	//刪除
	$scope.delete=function($index){
	if($index >=0){
	if(confirm("确认删除？")){
	$scope.shuzu.splice($index,1);
	}
	}
	};
	//刪除全部
	$scope.del=function($index){
	if($scope.shuzu.length>=0){
	if(confirm("是否刪除全部商品")){
	$scope.shuzu.splice($index);
	}
	}
	}
	//复选框
	var isAllSeclected=true;
	$scope.checkAll=function(){
	for(var i=0;i<$scope.list.length;i++){
	if(isAllSeclected){
	$scope.list[i].chk=true;
	}else{
	$scope.list[i].chk=false;
	}
	}
	isAllSeclected!=isAllSeclected;
	};
	});
	</script>
	</head>
	<body ng-app="myApp">
	<center>
	<table ng-controller="myCtrl" border="1" cellpadding="0" cellspacing="0" width="500" height="300">
	<tr>
	<td colspan="5"><inputtype="text"ng-model="query"/></td>
	<td><buttonstyle="background-color: red;"ng-click="del($index)">批量删除</button></td>

	</tr>
	<tr align="center">
	<th><inputtype="checkbox"ng-model="all"name="chk"ng-click="checkAll()"/></th>
	<th ng-click="col='bianhao';desc!=desc">商品编号</th>
	<th ng-click="col='name';desc!=desc">商品名称</th>
	<th ng-click="col='price';desc!=desc">商品价格</th>
	<th ng-click="col='num';desc!=desc">商品库存</th>
	<th>数据操作</th>
	</tr>
	<tr align="center" ng-repeat="x in shuzu\|orderBy:col:desc\|filter:query">
	<td><inputtype="checkbox"ng-model="all"name="chk"ng-click="checkAll()"/></td>
	<td>{{x.bianhao}}</td>
	<td>{{x.name}}</td>
	<td>{{x.price}}</td>
	<td>{{x.num}}</td>
	<td><button ng-click="delete($index)">删除</button></td>
	</tr>
	</table>
	</center>

	</body>
	</html>