AngularJS实现商品管理功能-优快云博客

本文介绍了使用AngularJS实现商品管理的各项功能，包括商品增删改查、全选反选、库存总价计算、批量删除、搜索排序等。通过示例代码展示了如何处理商品的输入验证、联动效果以及数据交互。

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

实现要求：

(1)CSS+HTML实现如图所示布局

(2)商品内容显示要隔行变色

(3)输入商品名称、价格、数量、发货地址后点击“添加”按钮后新增商品信息展示在列表中。要求商品名称（非空校验），商品价格必须大于0，商品数量必须大于0，发货地址要求做出二级联动效果（默认为河南-郑州）。若输入数据都符合要求则提示添加成功，然后在列表中展示，否则提示哪条信息输入有误。新增的商品具备以下功能要求。

(4)库存商品总价自动计算。当成功展示商品时，每条商品可以自动计算出该商品的库存总价。

(5)商品全选、反选功能。当用户点击全选按钮时选择所有的复选框。当用户反选时把之前选中的复选框变为未选中状态。

（6）批量删除功能。当用户点击批量删除时提示，若用户没有选中要删除的商品信息则提示用户先选中要删除的商品信息，否则提示用户删除

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a1{
width: 600px;
}
tr:nth-child(odd){
background-color: white;
}
tr:nth-child(even){
background-color: darkgray;
}
</style>
</head>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]).controller("myctrl",function($scope,$http){

//修改
$scope.xs=false;
$scope.xg= function(index){
$scope.xs=true;

idx=index;
$scope.gname_1=$scope.goods[index].gname;
$scope.price_1=$scope.goods[index].price;

angular增删改查