angularjs增删改查

最新推荐文章于 2021-04-28 16:04:55 发布

原创最新推荐文章于 2021-04-28 16:04:55 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的购物车应用案例，详细展示了如何通过AngularJS指令、控制器和表达式等特性来实现商品的增删改查、数量调整、价格计算等功能，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html ng-app="App">
	<head>
	<meta charset="UTF-8">
	<title></title>

	<style>
	.css1{
	background-color: red;
	}

	.css2{
	background-color: brown;
	}

	</style>
	</head>
	<body ng-controller="Demo">

	<input type="text" placeholder="请输入查询商品" ng-model="search" />
	数量排序:
	<select ng-model="selOrder">
	<option value="nums">数量正序</option>
	<option value="-nums">数量倒序</option>
	</select>
	<button ng-click="delSelect()" class="sb">批量删除</button><br />


	<table border="2px" cellspacing="0">

	<tr>
	<!--<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>-->
	<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
	<td>产品编号</td>
	<td>产品名称</td>
	<td>购买数量</td>
	<td>产品单价</td>
	<td>产品总价</td>
	<td>操作</td>
	</tr>



	<tr ng-repeat="x in datas \| filter:{name:search}\| orderBy:selOrder" class="{{ $even ? 'css1':'css2'}}">

	<td><input type="checkbox" ng-model="x.state"/></td>
	<td>{{x.id}}</td>
	<td>{{x.name}}</td>
	<td>
	<button ng-click="jian($index)">-</button>

	<input type="number" ng-model="x.nums"/>
	<button ng-click="add($index)">+</button>
	</td>
	<td>{{x.prices}}</td>
	<td>{{x.prices*x.nums}}</td>
	<td><button ng-click="remove($index)">移除</button>
	<button ng-click="updateShowFun($index)">修改</button>
	</td>
	</tr>
	</table>


	<div>
	<span>总价</span>
	<span>{{totalPrice()}}</h3>
	<span>总数</h3>
	<span>{{totalNum()}}</h3>
	<button ng-click="removeAll()">清空购物车</button>

	</div>


	<form style="border: 1px solid yellow; width: 260px;">

	商品编号:<input type="text" ng-model="ID"/><br />
	商品名称:<input type="text" ng-model="IDname"/><br />
	商品数量:<input type="number" ng-model="IDnum"/><br />
	商品单价:<input type="text" ng-model="IDprice"/><br />

	<button ng-click="add333()">添加</button>

	</form>

	<form style="border: solid black; width: 300px;" ng-show="updateShow">
	商品编号:<input type="text" ng-model="updateId"/><br />
	商品名称:<input type="text" ng-model="updateName"/><br />
	商品数量:<input type="number" ng-model="updateNum"/><br />
	商品单价:<input type="number" ng-model="updatePrice"/><br />
	<button type="button" value="提交" ng-click="updateSub()">提交</button>

	</form>

	<script src="../libs/angular.min.js"></script>

	<script>
	var App = angular.module("App",[]);
	App.controller("Demo",function($scope){

	//数据
	$scope.datas = [
	{
	id:1001,
	name:"ihone8",
	nums:1,
	prices:3888,
	state: false
	}
	,
	{
	id:1002,
	name:"ihone10",
	nums:1,
	prices:6888,
	state: false
	}
	,
	{
	id:1003,
	name:"ihone7",
	nums:1,
	prices:5888,
	state: false
	}
	];

	//数量减减
	$scope.jian = function(index){

	$scope.datas[index].nums--;

	}

	//数量加加
	$scope.add = function(index){

	$scope.datas[index].nums++;

	}

	//移除的
	$scope.remove = function(index){
	if(confirm("确定要移除吗?")){
	$scope.datas.splice(index,1);
	}


	}

	//全选和反选
	$scope.selectAllFun = function(){
	if($scope.selectAll){
	//如果是true的话，把下面的都选中


	for (var x=0;x<$scope.datas.length;x++) {

	$scope.datas[x].state = true;
	}

	}else{ //全部不选中
	for (var x=0;x<$scope.datas.length;x++) {

	$scope.datas[x].state = false;
	}
	}
	}


	//批量删除名字进行删除
	$scope.delSelect = function(){

	var arrs =[];
	for (var x=0;x<$scope.datas.length;x++) {
	if($scope.datas[x].state){
	arrs.push($scope.datas[x].name);
	}
	}

	if(arrs.length<=0){
	alert("请您选中你要删除的数据")
	}else{
	//开始进行删除

	for (var x=0;x<arrs.length;x++) {

	for (var x2=0;x2<$scope.datas.length;x2++) {

	if(arrs[x]==$scope.datas[x2].name){
	//删除
	$scope.datas.splice(x2,1);
	}

	}


	}
	}
	}


	//总价
	$scope.totalPrice = function(){

	var totalPrice=0;

	for (var x=0;x<$scope.datas.length;x++) {

	totalPrice+=$scope.datas[x].prices *$scope.datas[x].nums;
	}

	return totalPrice;

	}


	//总数
	$scope.totalNum = function(){

	var totalNums=0;

	for (var x=0;x<$scope.datas.length;x++) {

	totalNums+=$scope.datas[x].nums;
	}

	return totalNums;

	}

	//清空购物车
	$scope.removeAll = function(){
	$scope.datas =[];
	}
	//增加数据的方法
	$scope.add333 = function(){

	/*ng-model="ID"/><br />
	商品名称:<input type="text" ng-model="IDname"/><br />
	商品数量:<input type="text" ng-model="IDnum"/><br />
	商品单价:<input type="text" ng-model="IDprice"*/

	var flag1 = false;

	if($scope.ID=="" \|\| $scope.ID==null){
	flag1 = false;
	alert("ID不能为空")

	return;
	}else if(isNaN($scope.ID)){ //如果传入的参数是非数字返回true,如果是数字返回false
	flag1 = false;
	alert("ID必须是数字")
	return;
	}else{
	flag1 = true;
	}

	if($scope.IDname=="" \|\| $scope.IDname==null){
	flag1 = false;
	alert("IDname不能为空")
	return;
	}else{
	flag1 = true;
	}

	if($scope.IDnum=="" \|\| $scope.IDnum==null){
	flag1 = false;
	alert("IDnum不能为空")
	return;
	}else if(isNaN($scope.IDnum)){ //如果传入的参数是非数字返回true,如果是数字返回false
	flag1 = false;
	alert("IDnum必须是数字")
	return;
	}else{
	flag1 = true;
	}

	if($scope.IDprice=="" \|\| $scope.IDprice==null){
	flag1 = false;
	alert("IDnum不能为空")
	return;
	}else if(isNaN($scope.IDprice)){ //如果传入的参数是非数字返回true,如果是数字返回false
	flag1 = false;
	alert("IDnum必须是数字")
	return;

	}else{
	flag1 = true;
	}


	if(flag1){
	//添加数据到原始的集合里面
	$scope.datas.push({

	id:$scope.ID,
	name:$scope.IDname,
	nums:$scope.IDnum,
	prices:$scope.IDprice,


	});
	}


	}


	var index333 = 0;

	//修改的
	$scope.updateShowFun = function(index){

	index333=index;

	if(confirm("确定要修改吗")){
	$scope.updateShow = true;

	}

	}



	//提交按钮
	$scope.updateSub = function(){

	$scope.datas[index333].id = $scope.updateId;
	$scope.datas[index333].name = $scope.updateName;
	$scope.datas[index333].nums= $scope.updateNum;
	$scope.datas[index333].prices = $scope.updatePrice;



	/*for (var x=0;x<$scope.datas.length;x++) {

	$scope.datas.[index333]

	if($scope.datas[x].id==$scope.updateId){
	$scope.datas[x].id = $scope.updateId;
	$scope.datas[x].name = $scope.updateName;
	$scope.datas[x].nums= $scope.updateNum;
	$scope.datas[x].prices = $scope.updatePrice;
	}



	}*/

	}



	});

	</script>
	</body>
	</html>