购物车

最新推荐文章于 2023-05-26 14:36:40 发布

ASDWEEH

最新推荐文章于 2023-05-26 14:36:40 发布

阅读量291

点赞数

本文链接：https://blog.youkuaiyun.com/ASDWEEH/article/details/78052382

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>标题</title>
	<style>
	.non{
	display: none;
	}
	.font{
	color:red;
	}
	</style>
	<script src="angular-1.5.5/angular.min.js"></script>
	<script>
	var myapp = angular.module("myapp",[]);
	myapp.controller("myCtrl",function ($scope) {
	$scope.orderName = "index";//排序的字段
	$scope.order = false;//排序的方向
	$scope.allCheck = false;//全部选中框
	$scope.isCheck = false;//单选框
	$scope.search = "";//模糊查询
	$scope.items = [
	{
	index:1234,
	name:"ipad",
	price:3400,
	num:10,
	check:false
	},
	{
	index:1244,
	name:"aphone",
	price:6400,
	num:100,
	check:false
	},
	{
	index:1334,
	name:"mypad",
	price:4400,
	num:20,
	check:false
	},
	{
	index:8234,
	name:"zpad",
	price:6400,
	num:130,
	check:false
	}
	];
	//删除单个
	$scope.delete = function (index) {
	var isDelete = confirm("确定删除？");
	if(isDelete){
	for(var i = 0; i<$scope.items.length; i++){
	if ($scope.items[i].index == index){
	$scope.items.splice(i,1);
	}
	}
	}

	};
	//删除全部
	$scope.checkAll = function () {
	if($scope.allCheck == true){
	for(var i = 0; i<$scope.items.length; i++){
	$scope.items[i].check = true;
	}
	}else{
	for(var i = 0; i<$scope.items.length; i++){
	$scope.items[i].check = false;
	}
	}
	};
	//每个复选框
	$scope.itemCheck = function () {
	var flag = 0;
	for(var i = 0; i<$scope.items.length; i++){
	console.log($scope.items[i].check);
	if($scope.items[i].check == true){
	flag ++;
	}
	}
	if(flag == $scope.items.length){
	$scope.allCheck = true;
	}else{
	$scope.allCheck = false;
	}
	};
	//删除全部
	$scope.deleteAll = function () {
	var is = confirm("是否删除");
	if (is == true){
	var arr = [];
	for(var i = 0; i<$scope.items.length; i++){
	if($scope.items[i].check == false){
	arr.push($scope.items[i]);
	}
	}
	$scope.items = arr;
	}
	};
	//添加类
	$scope.addClass = function () {
	if($scope.items == ""){
	return "non";
	}
	};
	//改变排序方向和字段
	$scope.changeOrder = function (orderName) {
	if($scope.orderName == orderName){
	$scope.order = !$scope.order;
	}
	$scope.orderName = orderName;
	};
	//变色
	$scope.addClas = function (orderName) {
	if (orderName == $scope.orderName){
	return "font";
	}

	}
	});
	</script>
	</head>
	<body ng-app="myapp" ng-controller="myCtrl" ng-class="addClass()">
	<input type="text" placeholder="输入关键字...." ng-model="search">
	<button style="background: red;" ng-click="deleteAll()">批量删除</button>
	<table>
	<thead>
	<tr>
	<th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th>
	<th ng-click="changeOrder('index')" ng-class="addClas('index')">商品编号</th>
	<th ng-click="changeOrder('name')" ng-class="addClas('name')">商品名称</th>
	<th ng-click="changeOrder('price')" ng-class="addClas('price')">商品价格</th>
	<th ng-click="changeOrder('num')" ng-class="addClas('num')">商品库存</th>
	<th>数据操作</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in items \| filter:search \| orderBy:orderName:order">
	<td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td>
	<td>{{item.index}}</td>
	<td>{{item.name}}</td>
	<td>{{item.price \| currency:"￥"}}</td>
	<td>{{item.num}}</td>
	<td><button ng-click="delete(item.index)">删除</button></td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>