angularjs 增,删,改,查,一套数量加减操作

最新推荐文章于 2022-12-02 18:35:59 发布

CHHDEVIL

最新推荐文章于 2022-12-02 18:35:59 发布

阅读量391

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/weixin_41637420/article/details/79072565

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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.pros = [{
ck:false,
id:1,
name:"qq",
price:12.9,
number:2
},{
ck:false,
id: 2,
name: "wx",
price: 23.9,
number: 1
},{
ck:false,
id: 3,
name: "wx",
price: 99.9,
number: 3
}
];
//输入关键字搜索
$scope.search = "";
//全选反选
$scope.choose = function(){
for(index in $scope.pros){
$scope.pros[index].ck=$scope.xuan;
}
}
//总价
$scope.allprice = function(){
$scope.a=0;
for(index in $scope.pros){
$scope.a = $scope.pros[index].price*$scope.pros[index].number+$scope.a;
}
return $scope.a;
}
//删除
$scope.isshow = true;
$scope.delete = function(index){
for(a in $scope.pros){
if($scope.pros[a].id == index){
$scope.pros.splice(a,1);
}
if($scope.pros.length == 0){
$scope.isshow = false;
}
}
}
//批量删除
$scope.deleteAll= function(){
for(var i=0;i<$scope.pros.length;i++){
if ($scope.pros[i].ck==true) {
$scope.pros.splice(i,1);
i--;
}
if($scope.pros.length == 0){
$scope.isshow = false;
}
}
}
//点击减一
$scope.less = function(id){
for(index in $scope.pros){
if(id == $scope.pros[index].id){
if($scope.pros[index].number>1){
$scope.pros[index].number-- ;
}else{
if(window.confirm("确定删除吗")){
$scope.pros.splice(index,1);
};
}
}
}
}
//入库
$scope.formShow = false;
$scope.addpros = function(){
$scope.formShow=true;
}
//保存到table表
$scope.add = function(){
var newName = $scope.newName;
var newPrice = parseInt($scope.newPrice);
var newNum = parseInt($scope.newNum);
var id=0;
for(index in $scope.pros){
if($scope.pros[index].id>id){
var id = $scope.pros[index].id;
}
}
//每次点击加一
var newId = id+1;

var newPro ={
ck:false,
id:newId,
name:newName,
price:newPrice,
number:newNum
}

//追加到数组
$scope.pros.push(newPro);
$scope.formShow=false;
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>我的购物车</h3>
<input type="text" placeholder="输入关键字搜索.." ng-model="search">
<select ng-model="pai">
<option value="">按数量排序</option>
<option value="number">按数量正序排序</option>
<option value="-number">按数量倒叙排序</option>
</select>
<button ng-click="deleteAll()">清空购物车</button>
<button ng-click="addpros()">入库</button>
<table border="1px" cellpadding="10" cellspacing="0" ng-show="isshow">
<thead>
<th><input type="checkbox" ng-model="xuan" ng-click="choose()"></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalprice</th>
<th>option</th>
</thead>
<tbody>
<tr ng-repeat="pro in pros | filter:{name:search} | orderBy:pai">
<td><input type="checkbox" ng-model="pro.ck"></td>
<td>{{pro.name}}</td>
<td>
<span ng-hide="xginput">{{pro.price | currency:"￥"}}</span>
<span ng-show="xginput">
<input type="text" ng-model="pro.price"/>
<button ng-click="xginput=false">保存</button>
</span>
</td>
<td>
<button ng-click="less(pro.id)">-</button>
{{pro.number}}
<button ng-click="pro.number = pro.number+1 ">+</button>
</td>
<td>{{pro.price * pro.number | currency:"￥"}}</td>
<td>
<button ng-click="delete(pro.id)">删除</button>
<button ng-click="xginput=true">修改价格</button>
</td>

</tr>
</tbody>
<tr>
<td colspan="2">总价格为:</td>
<td colspan="4" ng-bind="allprice() | currency:'￥' "></td>
</tr>
</table>
<p ng-show="!isshow">购物车为空</p><br />
<form ng-show="formShow">
<h3>添加商品</h3>
商品名称：<input type="text" ng-model="newName" placeholder="请输入商品名称.."/><br /><br />
商品价格：<input type="text" ng-model="newPrice" placeholder="请输入商品价格.."/><br /><br />
商品数量：<input type="text" ng-model="newNum" placeholder="请输入商品数量.."/><br /><br />
<input type="button" ng-click="add()" value="提交" />
</form>
</center>
</body>
</html>

CHHDEVIL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 增,删,改,查,一套数量加减操作

angular.module("myApp",[]).controller("myCtrl",function($scope){//数组$scope.pros = [{ck:false,id:1,name:"qq",price:12.9,number:2},{ck:false,id: 2,name: "wx",price: 23.9,numb
复制链接

扫一扫