<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*隔行变色*/
.css1 {
background-color: antiquewhite;
}
.css2 {
background-color: burlywood;
}
/*按钮变小手*/
.sb {
cursor: pointer;
}
</style>
<script type="text/javascript" src="lib/angular.js"></script>
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//加入假数据
$scope.datas =[
{
id:1001,
name:"iphone7",
price:6888,
num:1,
state:false
},
{
id: 1002,
name: "iphone8",
price: 7888,
num: 1,
state: false
}, {
id: 1003,
name: "iphoneX",
price: 8888,
num: 1,
state: false
}
];
//点击根据名字删除掉
$scope.del = function(na) {
if(window.confirm("你确定删除" + na + "吗")) {
for(index in $scope.datas) {
if(na == $scope.datas[index].name) {
$scope.datas.splice(index, 1);
}
}
}
}
//点击-号减去数量
$scope.jian = function(index){
if($scope.datas[index].num>1){
$scope.datas[index].num--;
}else{
alert("不能再减了！你可以删除商品")
}
}
//+号添加商品
$scope.jia = function(index){
$scope.datas[index].num++;
}
//总价格
$scope.prices = function(){
var p = 0;
for(var x = 0;x<$scope.datas.length;x++){
p +=$scope.datas[x].num*$scope.datas[x].price;
}
return p;
}
//总数量
$scope.content = function(){
var p = 0;
for (var x = 0;x<$scope.datas.length;x++) {
p+=$scope.datas[x].num;
}
return p ;
}
//添加页面
$scope.add = function(){
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag4 = false;
//判断非空 必须为数字
if($scope.ID==""||$scope.ID == null){
alert("id不能为空");
flag1 = false
}else if(isNaN($scope.ID)){
alert("id必须为数字");
flag1= false;
}else{
flag1 = true;
}
if($scope.IDname == "" || $scope.IDname == null) {
alert("商品不能为空");
flag2 = false;
} else {
flag2 = true;
}
if($scope.IDnum == "" || $scope.IDnum == null) {
alert("数量不能为空");
flag3 = false;
} else if(isNaN($scope.IDnum)) {
alert("数量必须为数字");
flag3 = false;
} else {
flag3 = true;
}
if($scope.IDprice == "" || $scope.IDprice == null) {
alert("单价不能为空");
flag4 = false;
} else if(isNaN($scope.IDprice)) {
alert("单价必须为数字");
flag4 = false;
} else {
flag4 = true;
}
//点击添加 显示数据
if(flag1 && flag2 && flag3&&flag4){
$scope.datas.push({
id:$scope.ID,
name:$scope.IDname,
num:$scope.IDnum,
price:$scope.IDprice
});
}
}
//全选反选
$scope.selectAll = false;
$scope.selectAllFun= function(){
if($scope.selectAll){
for (index in $scope.datas) {
$scope.datas[index].state = true;
}
}else{
for (index in $scope.datas) {
$scope.datas[index].state = false;
}
}
}
//批量删除
$scope.delSelect = function(){
var arr = [];
for (index in $scope.datas) {
if($scope.datas[index].state){
arr.push($scope.datas[index].name);
}
}
if(arr.length<=0){
alert("请重新选择删除的项目");
}else{
if(window.confirm("确定要删除吗？")){
for(index in arr){
for (index2 in $scope.datas) {
if (arr[index]==$scope.datas[index2].name) {
$scope.datas.splice(index2,1);
}
}
}
}else{
alert("您已取消删除");
}
}
}
//修改页面
$scope.updateShow = false;
$scope.updateId = "";
$scope.updateName = "";
$scope.updateNum = "";
$scope.updatePrice = "";
$scope.updateShowFun = function(aa){
if(window.confirm("你确定要修改吗？")){
$scope.updateShow = true;
$scope.updateId = aa.id;
$scope.updateName = aa.name;
$scope.updateNum = aa.num;
$scope.updatePrice = aa.price;
}else{
alert("你已经取消了修改");
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!-- <center>-->
<input type="text" placeholder="请输入查询商品" ng-model="search"/>数量排序：
<select ng-model="selOrder">
<option value="num">数量正序</option>
<option value="num">数量倒序</option>
</select>
<button ng-click="delSelect()" class="sb">批量删除</button><br />
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr align="center" style="background-color: aqua;">
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>
<td width="100px">商品编号</td>
<td width="100px">商品名称</td>
<td width="230px">商品数量</td>
<td width="100px">商品单价</td>
<td width="100px">商品总价</td>
<td width="110px">商品操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center">
<td><input type="checkbox" ng-model="a.state" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="text" ng-model="a.num" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{a.price}}</td>
<td>{{a.price*a.num}}</td>
<td><button ng-click="del(a.name)" class="sb">删除</button>
<button ng-click="updateShowFun(a)" class="sb">修改</button>
</td>
</tr>
</tbody>
</table>
<h3>总金额:{{prices()}} 总数量:{{content()}}</h1>
<form style="border: 1px solid yellow; width: 300px;">
<h3>添加商品</h3>
商品编号:<input type="text" ng-model="ID"/><br /><br />
商品名称:<input type="text" ng-model="IDname"/><br /><br />
商品数量:<input type="text" ng-model="IDnum"/><br /><br />
商品单价:<input type="text" ng-model="IDprice"/><br /><br />
<button ng-click="add()" class="sb">添加</button>
</form>
<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
<h3>修改商品</h3> 商品编号:
<input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称:
<input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量:
<input type="text" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价:
<input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="updateSub()" class="sb" />
</form>
<!--</center>-->
</body>
</html>
angularjs（增删改查完整版）
猜你喜欢
转载自blog.csdn.net/qq_40857831/article/details/79097064
今日推荐
周排行