angularJs 增加删除排序

最新推荐文章于 2019-10-09 12:19:10 发布

小神奇

最新推荐文章于 2019-10-09 12:19:10 发布

阅读量453

点赞数

分类专栏： jQuery 文章标签： angularjs 删除

本文链接：https://blog.csdn.net/Star_Q/article/details/78051106

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script>
			var app = angular.module("myApp",[]);
			app.controller("myCtrl",function($scope){
				//添加数据
				$scope.bx =[
				{id:1234,name:'ipad',price:3400,kc:10},
				{id:1244,name:'aphone',price:5400,kc:30},
				{id:1334,name:'mypad',price:3600,kc:15},
				{id:8234,name:'zpad',price:7400,kc:16}
				];
				//删除
				$scope.shan = function(index){
					$scope.bx.splice(index,1);
				};
				//批量删除
				$scope.plsc =function(index){
					$scope.bx.splice(index);
				};
				//排序
				$scope.orderColumn='name';
				$scope.orderSign='-';
				$scope.sort = function(sortColumn){
					$scope.orderColumn=sortColumn;
					if($scope.orderSign=='-'){
						$scope.orderSign="";
					}else{
						$scope.orderSign="-";
					}
				};
			});
		</script>
	</head>
	<link rel="stylesheet" href="css/zk.css" />
	<body ng-app="myApp" ng-controller="myCtrl">
		<div id="bos">
			<div id="s">
				<input type="text" id="search" ng-model="search" placeholder="输入关键字..." />
				<button class="pl" ng-click="plsc($index)" >批量删除</button>
			</div>
			<div id="x">
				<table>
					<tr>
						<td><input type="checkbox" ng-model="qx"/></td>
						<td ng-click="sort('id')">商品编号</td>
						<td ng-click="sort('name')" style="color: red;">商品名称</td>
						<td ng-click="sort('price')">商品价格</td>
						<td ng-click="sort('kc')">商品库存</td>
						<td>数据操作</td>
					</tr>
					<tr ng-repeat="x in bx | filter:{'name':search}|orderBy:(orderSign + orderColumn)">
						<td><input type="checkbox" ng-checked="qx"/></td>
						<td>{{x.id}}</td>
						<td>{{x.name}}</td>
						<td>{{x.price | currency:'￥:'}}</td>
						<td>{{x.kc}}</td>
						<td><button style="background: orange;" ng-click="shan($index)">删除</button></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>