AngularJS购物车应用-优快云博客

本文链接：https://blog.youkuaiyun.com/nyf19980311/article/details/78856706

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	/**{
	margin: auto;
	padding: 0;
	}*/
	body{
	text-align: center;
	margin: 50px auto;
	}
	/*table
	{
	margin-top: 30px;
	}*/
	.btn
	{
	background: cornflowerblue;

	width: 100px;
	height: 50px;
	}
	tr:nth-child(2n){
	background: #666;
	}
	</style>

	<script type="text/javascript" src="js/angular.js" ></script>
	<script>
	var app = angular.module("myApp",[]);
	app.controller("myCtrl",function($scope){
	$scope.student = [{
	"id":80,
	"name":"iPhone",
	"price":5400
	},{
	"id":290,
	"name":"iPad",
	"price":1420
	},{
	"id":500,
	"name":"iPad air",
	"price":2340
	},{
	"id":910,
	"name":"imac",
	"price":15400
	},{
	"id":1200,
	"name":"iPad mini",
	"price":2200
	}]
	$scope.px = "";

	// $scope.sc = function(name){
	// if (window.confirm("确定删除？")) {
	// for (a in $scope.student) {
	// if (name == $scope.student[a].name) {
	// $scope.student.splice(a,1);
	// }
	// }
	// }
	// }
	//删除
	$scope.sc = function(name){
	if(window.confirm("确定删除？")){
	for (a in $scope.student) {
	if(name == $scope.student[a].name){
	$scope.student.splice(a,1);
	}
	}
	}
	}

	//修改
	$scope.xg = function(price){
	for (index in $scope.student) {
	if (price == $scope.student[index].price) {
	var result = parseInt(window.prompt("清输入要修改的价格",price));
	if (result<0) {
	alert("输入有误，请重新输入");
	} else{
	if (window.confirm("确定要将"+$scope.student[index].name+"的价格更改为:"+result+"吗？")) {
	$scope.student[index].price = result;
	}
	}
	} else{

	}
	}
	}

	//全选，全不选
	$scope.selectAll = false;
	$scope.selectAllFun = function(){
	if ($scope.selectAll) {
	for (index in $scope.student) {
	$scope.student[index].state = true;
	}
	} else{
	for (index in $scope.student) {
	$scope.student[index].state = false;
	}
	}
	}

	//反选
	$scope.checkSelecetAll = function(){
	var flag = false;
	for (index in $scope.student) {
	if (!$scope.student[index].state) {
	flag = true;
	}
	}
	if (flag) {
	$scope.selectAll = false;
	} else{
	$scope.selectAll = true;
	}
	}


	//批量删除
	$scope.plsc = function(){
	var is = [];
	for (index in $scope.student) {
	if ($scope.student[index].state) {
	is.push($scope.student[index]);
	}
	}
	for (index in is) {
	var name = is[index].name;
	for (index2 in $scope.student) {
	if (name == $scope.student[index2].name) {
	$scope.student.splice(index2,1);
	}
	}
	}
	}

	//添加商品
	$scope.isShow = false;
	$scope.isShow2 = false;
	$scope.showForm = function() {
	if($scope.isShow) {
	$scope.isShow = false;
	} else {
	$scope.isShow = true;
	}
	}

	//添加
	$scope.submit = function() {
	$scope.errorArr = [];
	//判断id是否为空
	if($scope.newId == null \|\| $scope.newId == "") {
	$scope.errorArr.push("ID不能为空");
	} else if(isNaN($scope.newId)) {
	$scope.errorArr.push("ID必须是数字");
	}
	if($scope.newName == null \|\| $scope.newName == "") {
	$scope.errorArr.push("产品名称不能为空");
	} else {
	for(index in $scope.shops) {
	if($scope.student[index].name == $scope.newName) {
	$scope.errorArr.push("产品名称不能重复");
	}
	}
	}
	if($scope.newPrice == null \|\| $scope.newPrice == "") {
	$scope.errorArr.push("价格不能为空");
	} else if(isNaN($scope.newPrice)) {
	$scope.errorArr.push("价格必须是数字");
	}

	if($scope.errorArr.length > 0) {
	//显示列表
	$scope.isShow2 = true;
	} else {
	$scope.isShow2 = false;
	//添加商品
	var newShop = {
	id: parseInt($scope.newId),
	name: $scope.newName,
	price: parseInt($scope.newPrice),
	num:1,
	state: false
	};
	$scope.student.push(newShop);
	$scope.isShow = false;
	}
	}


	});
	</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
	<center>
	<h3>购物车</h3>
	产品名称：<input type="text" placeholder="产品名称" ng-model="cx"/>
	排序：<select ng-model="px">
	<option value="">排序方法</option>s
	<option value="id">id正序</option>
	<option value="-id">id逆序</option>
	<option value="price">价格正序</option>
	<option value="-price">价格逆序</option>
	</select>
	<button ng-click="plsc()">批量删除</button><br /><br />

	<table border="1px solid blue" cellpadding="10" cellspacing="0">
	<tr>
	<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
	<th>产品编号</th>
	<th>产品名称</th>
	<th>产品价格</th>
	<th>操作</th>
	</tr>
	<tr ng-repeat="p in student \| filter:{name:cx} \| orderBy:px">
	<td><input type="checkbox" ng-model="p.state" ng-click="checkSelecetAll()"/></td>
	<td>{{p.id}}</td>
	<td>{{p.name}}</td>
	<td>{{p.price}}</td>
	<td>
	<button ng-click="sc(p.name)">删除</button>
	<button ng-click="xg(p.price)">修改</button>
	</td>
	</tr>
	</table><br />

	<button ng-click="showForm()">添加商品</button><br /><br />

	<fieldset ng-show="isShow" id="" style="width: 400px;">
	<legend>添加商品</legend><br />
	<form>
	产品编号：<input type="text" ng-model="newId" /><br /><br /> 产品名称：
	<input type="text" ng-model="newName" /><br /><br /> 产品价格：
	<input type="text" ng-model="newPrice" /><br /><br />

	<ul ng-show="isShow2" style="width: 200px; background-color: #f89;">
	<li ng-repeat="error in errorArr">{{error}}</li>
	</ul>

	<input ng-click="submit()" type="button" value="添加" />
	</form>

	</fieldset>

	</center>
	</body>
	</html>