angular可以加减的增删改查

最新推荐文章于 2022-11-23 13:20:20 发布

Caihua_CN

最新推荐文章于 2022-11-23 13:20:20 发布

阅读量442

点赞数

本文链接：https://blog.csdn.net/Caihua_CN/article/details/79102735

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>购物</title>
<script type="text/javascript" src="js/angular.js"></script>
<script>
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.arr = [{
ck: false,
id: 1,
name: "qq",
price: 12,
numb: 2,
},
{
ck: false,
id: 2,
name: "wx",
price: 23,
numb: 1,
},
{
ck: false,
id: 3,
name: "wc",
price: 33,
numb: 1,
}
];

//总价
$scope.sum = function() {
var sun = 0;
for(al in $scope.arr) {
sun = $scope.arr[al].price * $scope.arr[al].numb + sun;
}
return sun;
}
//减一
$scope.jian = function(id) {
//alert(id)
for(index in $scope.arr) {
if(id == $scope.arr[index].id) {
if($scope.arr[index].numb > 1) {
$scope.arr[index].numb--;
} else {
if(window.confirm("确认删除吗?")) {
$scope.arr.splice(index, 1);
}
}
}
}

}
$scope.num = ""
$scope.search = ""
//添加
$scope.isshow = false;
$scope.add = function() {
var reg1 = /^\w{1,9}$/;
var reg2 = /^\d+$/;
if(reg1.test($scope.newName) && reg2.test($scope.newPrice) && reg2.test($scope.newNumber)) {

$scope.qk = true;
//id
var id = 0;
for(index in $scope.arr) {
if($scope.arr[index].id > id) {
var id = $scope.arr[index].id;
}
}
var newId = id + 1;

var s = {
ck: false,
id: newId,
name: $scope.newName,
price: parseInt($scope.newPrice),
numb: parseInt($scope.newNumber)
}
$scope.arr.push(s);
$scope.isshow = false;
$scope.newName = "";
$scope.newPrice = "";
$scope.newNumber = "";
} else {
alert("输入格式有误");
}
}//删除
$scope.del = function(id) {
for(index in $scope.arr) {
if(id == $scope.arr[index].id) {
$scope.arr.splice(index, 1);
}
}
}

//全部删除
$scope.qk=true;
$scope.delAll = function() {
$scope.arr.splice(0,$scope.arr.length );
$scope.qk=false;
}

//全选全不选
$scope.qx=function(){
for(index in $scope.arr){
$scope.arr[index].ck=$scope.ckall;
}
}

//批量删除
$scope.pl=function(){
$scope.aln=[];
for(i in $scope.arr){
if ($scope.arr[i].ck) {
$scope.aln.push($scope.arr[i]);
}
}
for(index in $scope.aln){
for(index2 in $scope.arr){
if($scope.aln[index]==$scope.arr[index2]){
$scope.arr.splice(index2,1);
}
}
}
}
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h1>我的购物车</h1><br /><br />
<input type="text" placeholder="请输入关键词搜索..." ng-model="search" />
<select ng-model="num">
<option value=""></option>
<option value="number">按数量正序排列</option>
<option value="-number">按数量倒叙排列</option>
</select>

<button ng-click="isshow=true">入库</button>
<button ng-click="pl()">批量删除</button>
<button ng-click="delAll()">清空购物车</button><br /><br />
<table border="1" cellpadding="10" cellspacing="0" ng-show="qk">
<tr>
<th><input type="checkbox" ng-click="qx()" ng-model="ckall"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
<tr ng-repeat="al in arr |filter:search |orderBy:num">
<td><input type="checkbox" ng-model="al.ck" /></td>
<td>{{al.name}}</td>
<td>{{al.price | currency:"￥:"}}</td>
<td><button ng-click="jian(al.id)">-</button>
<input value="{{al.numb}}" style="width: 20px;height: 20px;" />
<button ng-click="al.numb = al.numb + 1">+</button> </td>
<td>{{al.price*al.numb | currency:"￥:"}}</td>
<td><button ng-click="del(al.id)">删除</button> </td>
</tr>
<tr>
<td colspan="6">总价为:<span ng-bind="sum()|currency:'￥:'"></span></td>
</tr>
</table>
<div ng-show="isshow">
<h3>添加商品</h3>
<input type="text" ng-model="newName" /><br /><br />
<input type="text" ng-model="newPrice" /><br /><br />
<input type="text" ng-model="newNumber" /><br /><br />
<button ng-click="add()">提交</button>
</div>
<div ng-show="!qk">
<h2>购物车为空</h2>
</div>
</center>
</body>

</html>