删除啥都有

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<!--
	先导入库
	配置环境
	
	//页面
	
-->
	<script src="js/angularjs1.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		document.addEventListener('plusready', function() {
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

		});
	</script>

	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		.title {
			height: 40px;
			width: 100%;
			background: blue;
			color: white;
			text-align: center;
			line-height: 40px;
		}
		
		table {
			width: 100%;
		}
		
		td {
			border-bottom: 1px solid black;
		}
	</style>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
	<!--页面-->
	<div class="main">
		<div class="title">
			商品比价列表
		</div>
		<input type="text" ng-model="gname" placeholder="根据商品名查询" />
		<select ng-model="by">
			<option value="">请选择</option>
			<option value="ctime">时间正序</option>
			<option value="-ctime">时间倒序</option>

		</select>
		<input type="button" value="全选" ng-click="quan()" />
		<input type="button" value="反选" ng-click="fan()" />
		<input type="button" value="批量删除" ng-click="deleAll()" />

		<table border="0px" cellspacing="0" cellpadding="0">
			<!--
				
			-->
			<tr ng-repeat="good in goods|filter:gname|orderBy:by">
				<td><input type="checkbox" ng-model="good.ck" /></td>
				<td><img src="{{good.picUrl}}" /></td>
				<td>
					<div>
						{{good.title}}
					</div>
					<div>
						來源：{{good.description}}
					</div>
					<div>
						时间：{{good.ctime|date:"yyyy-MM-dd"}}
					</div>
				</td>
				<td>
					<input type="button" name="" id="" value="删除" ng-click="dele(good.title)" />
				</td>
			</tr>
		</table>

	</div>
	<!--添加页面-->
	<center>
		<div class="add_view">
			<span>
			添加页面
		</span>
			<br> 标题：
			<input type="text" ng-model="title12" /><br> 来源：
			<input type="text" ng-model="des12" /><br> 时间：
			<input type="text" ng-model="time12" /><br>
			<input type="button" name="" id="" value="提交" ng-click="add()" />
		</div>
	</center>

	<script type="text/javascript">
		var moudle = angular.module("myApp", []);

		moudle.controller("myCtrl", function($scope, $http) {
			//使用服务进行网络请求
			$http.get("goods.json").then(function(res) {
				$scope.goods = res.data;

			});
			//				$scope.goods = 

			//全选
			/**
			 * 将对象里面的变量ck全部只为true
			 * 
			 */
			$scope.quan = function() {
				for(var i = 0; i < $scope.goods.length; i++) {
					var g = $scope.goods[i];
					g.ck = true;
				}
			}
			//反選
			$scope.fan = function() {
				for(var i = 0; i < $scope.goods.length; i++) {
					var g = $scope.goods[i];
					g.ck = !g.ck;
				}
			}
			//批量删除
			$scope.deleAll = function() {

				for(var i = $scope.goods.length - 1; i >= 0; i--) {
					var g = $scope.goods[i];
					if(g.ck) {
						$scope.goods.splice(i, 1);
					}
				}

			}
			//单个删除 --根据标题，千万不要根据索引
			$scope.dele = function(title) {
				for(var i = 0; i < $scope.goods.length; i++) {
					var g = $scope.goods[i];
					if(g.title == title) {
						$scope.goods.splice(i, 1);
					}
				}
			}

			$scope.add = function() {

				var title = $scope.title12;
				var des = $scope.des12;
				var time = $scope.time12;
				//创建对象，将数据放入对象
				var obj = {
					"ctime": time,
					"title": title,
					"description": des,
					"picUrl": "http://d.ifengimg.com/w145_h103/p0.ifengimg.com/pmop/2018/0910/D739C5CDA092C4CEFA16E800B88ACC3A6494D30D_size24_w640_h427.jpeg",
					"url": "http://sports.ifeng.com/a/20180911/60050282_0.shtml"
				}
				//加入数组
				$scope.goods.push(obj);
				

			}

		});
	</script>
</body>
猜你喜欢
