全选angularjs

最新推荐文章于 2023-08-30 19:27:49 发布

healer1

最新推荐文章于 2023-08-30 19:27:49 发布

阅读量302

点赞数

分类专栏：全选angularjs 文章标签：全选angularjs

本文链接：https://blog.csdn.net/healer1/article/details/78037628

版权

全选angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js"></script>
		<style>
			.na {
				width: 500px;
				height: 50px;
				line-height: 50px;
				background: grey;
				margin: 0 auto;
			}
			
			.na .btn {
				float: right;
				margin-top: 15px;
			}
		</style>
		<script type="text/javascript">
			var app = angular.module("myapp", []);
			app.factory("productList", function() {
				return [{
						che:false,
						id: 1234,
						name: "ipad",
						price: 3400.00,
						num: 10
					},
					{
						che:false,
						id: 1244,
						name: "aphone",
						price: 6400.00,
						num: 100
					},
					{
						che:false,
						id: 1334,
						name: "mypad",
						price: 4400.00,
						num: 20
					},
					{
						che:false,
						id: 8234,
						name: "zpad",
						price: 8400.00,
						num: 130
					},
				]
			});

			app.controller("myctrl", function($scope, productList) {
				$scope.productList = productList;
				$scope.orderColumn = 'name';
				$scope.orderSign = '-';

				$scope.sortProduct = function(sortColumn) {
					$scope.orderColumn = sortColumn;
					if($scope.orderSign == "-") {
						$scope.orderSign = "";
					} else {
						$scope.orderSign = '-';
					}
				};
				//删除
				$scope.del = function(index) {
					if(confirm("确定要删除吗？")) {
						$scope.productList.splice("index", 1);
					}
				}
				//全选
				 $scope.chk;
				 $scope.cheAll= function(){
				 	if($scope.chk == true){
				 		for (var i = 0; i < $scope.productList.length; i++) {
				 			$scope.productList[i].che=true;
				 		}
				 	}else{
				 		for (var i = 0; i < $scope.productList.length; i++) {
				 			$scope.productList[i].che=false;
				 		}
				 	}
				 };
				//批量删除
				$scope.remove= function(){
					if($scope.chk==true){
						if(confirm("是否确定删除")){
							$scope.productList=[];
						}
					}else{
						for (var i = 0; i < $scope.productList.length; i++) {
							if($scope.productList[i].che==true){
								$scope.productList.splice(i,1);
								i--;
							}
						}
					}
				};
			});
		</script>
	</head>

	<body ng-app="myapp" ng-controller="myctrl">
		<h1>商品库存信息管理</h1>
		<nav class="na">
			<input type="text" ng-model="search" placeholder="输入商品名称" />
			<button class="btn" ng-click="remove()">批量删除</button>
		</nav>
		<table border="1" align="center">
			<thead>
				<th><input type="checkbox" ng-click="cheAll()" ng-model="chk"></th>
				<th ng-click="sortProduct('id')">商品编号</th>
				<th ng-click="sortProduct('name')">商品名称</th>
				<th ng-click="sortProduct('price')">商品价格</th>
				<th ng-click="sortProduct('num')">商品库存</th>
				<th>数据操作</th>
			</thead>
			<tbody>
				<tr ng-repeat="item in productList | filter:{name:search} | orderBy:(orderSign + orderColumn)">
					<td><input type="checkbox" ng-model="item.che"></td>
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price |currency:'￥'}}</td>
					<td>{{item.num}}</td>
					<td><button ng-click="del($index)">删除</button></td>
				</tr>
			</tbody>
		</table>
	</body>

</html>

healer1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选angularjs

.na { width: 500px; height: 50px; line-height: 50px; background: grey; margin: 0 auto; } .na .btn { float: right; margin-top: 15px; } var app = angula
复制链接

扫一扫