AngularJS查询.排序.表头排序.全选.删除.批量删除

最新推荐文章于 2024-03-27 10:50:16 发布

Mike_8859

最新推荐文章于 2024-03-27 10:50:16 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/Mike_chao/article/details/78576003

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js"></script>

		<script type="text/javascript">
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope) {
				$scope.goods = [{
					id: "1234",
					name: "ipad",
					price: "3400",
					num: "10",
					check: false
				}, {
					id: "1244",
					name: "aphone",
					price: "6400",
					num: "100",
					check: false
				}, {
					id: "1334",
					name: "mypad",
					price: "4400",
					num: "20",
					check: false
				}, {
					id: "8234",
					name: "zpad",
					price: "8400",
					num: "130",
					check: false
				}, {
					id: "9999",
					name: "minipad",
					price: "9998",
					num: "150",
					check: false
				}]
				//删除
				$scope.delete = function(index) {

					var con = confirm("确认删除该数据吗?");
					if(con == true) {
						$scope.goods.splice(index, 1);

					} else {

					}

				}
				//全选
				//$scope.selectAll = false;
				$scope.checkall = function() {

					if($scope.selectAll == true) {

						for(var i = 0; i < $scope.goods.length; i++) {
							$scope.goods[i].check = true;
						}
					} else {
						for(var i = 0; i < $scope.goods.length; i++) {
							$scope.goods[i].check = false;
						}
					}
				}

				//批量删除
				$scope.deleteAll = function() {

					var s = confirm("确定删除吗?");
					if(s == true) {
						for(var i = 0; i < $scope.goods.length; i++) {
							if($scope.goods[i].check == true) {
								$scope.goods.splice(i, 1);
								i--;
							}

						}
					}
				}
			// 筛选
				$scope.sel = "--请选择--";
				$scope.money = function(item) {
					var arr = $scope.sel.split("-");
					var min = arr[0];
					var max = arr[1];
					if(item < min || item > max) {
						return false
					} else {
						return true;
					}
				}

				//修改
				$scope.update = function() {

				}

			});
		</script>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<center>

			<h2>商品信息管理</h2>
			<input type="text" placeholder="输入关键字" ng-model="cx" /> 
			<select ng-model="sel">
				<option>--请选择--</option>
				<option>1000-2000</option>
				<option>2000-4000</option>
				<option>4000-10000</option>
			</select>
			<select ng-model="selOrder" ng-change="orderSel()">
				<option value="">--排序方式--</option>
				<option value="id">id正序</option>
				<option value="-id">id倒序</option>
				<option value="price">价格正序</option>
				<option value="-price">价格倒序</option>
			</select>
			      <button style="background: red;" ng-click="deleteAll($index)">批量删除</button>
			<br />
			<br />

			<table border="1" cellpadding="10" cellspacing="0">
				<tr>
					<th><input type="checkbox" ng-model="selectAll" ng-click="checkall()" /></th>
					<th ng-click="title = 'id';desc=!desc">商品编号</th>
					<th ng-click="title = 'name';desc=!desc">商品名称</th>
					<th ng-click="title = 'price';desc=!desc">商品价格</th>
					<th ng-click="title = 'num';desc=!desc">商品库存</th>
					<th>数据操作</th>
				</tr>
				<tr ng-repeat="good in goods | orderBy : title :desc | filter:{'name':cx}" ng-if="money(good.price)">
					<td><input type="checkbox" ng-model="good.check" /></td>
					<td>{{good.id}}</td>
					<td>{{good.name}}</td>
					<td>{{good.price | currency:"￥: "}}</td>
					<td>{{good.num}}</td>
					<td><button ng-click="delete($index)">删除</button><button ng-click="update($index)">修改</button></td>
				</tr>
			</table>
		</center>
	</body>

</html>

Mike_8859

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS查询.排序.表头排序.全选.删除.批量删除

var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.goods = [{ id: "1234", name: "ipad", price: "3400", num: "10", check: false
复制链接

扫一扫