angular数值的加减操作，如果为0，删除此条数据

最新推荐文章于 2019-06-05 09:47:23 发布

开心就好吧

最新推荐文章于 2019-06-05 09:47:23 发布

阅读量768

点赞数

本文链接：https://blog.csdn.net/qq_41443109/article/details/79105161

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/angularjs-1.55/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.pros = [{
id: 1,
name: "qq",
price: 12.9,
number: 2
},
{
id: 2,
name: "wx",
price: 23.9,
number: 1
},
{
id: 3,
name: "wx",
price: 99.9,
number: 3
}
];
$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.qx = function() {
for(index in $scope.pros) {
$scope.pros[index].state = $scope.xuan;
}
}
$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() {

}

//减一操作
$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{
//alert("数量不能下于0");
if(window.confirm("确定删除吗")){
$scope.pros.splice(index,1);
};
}
}
}
}

$scope.formShow = false;
//入库
$scope.addProduct = function(){
$scope.formShow = true;
}
//添加商品
$scope.add = function(){
var newName = $scope.newName;
var newPrice = parseInt($scope.newPrice);
var newNum = parseInt($scope.newNum);
//var newId = 5;
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 = {
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="selectname" />
<select ng-model="pai">
<option value="">按数量排序</option>
<option value="+number">按数量正序排序</option>
<option value="-number">按数量倒叙排序</option>
</select>
<button ng-click="deleteAll()">清空购物车</button>
<button ng-click="addProduct()">入库</button>
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<th><input type="checkbox" ng-model="xuan" ng-click="qx()"></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:selectname} | orderBy:pai">
<td><input type="checkbox" ng-model="pro.state"></td>
<td>{{pro.name}}</td>
<td>{{pro.price | currency:"￥"}}</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></td>

</tr>
</tbody>
<tr>
<td colspan="2">总价格为:</td>
<td ng-bind="allprice() | currency:'￥'" colspan="4"></td>
</tr>
</table>
<p ng-show="!isshow">购物车为空</p><br />

<form ng-show="formShow">
<h3>添加商品</h3>
商品名称：<input type="text" ng-model="newName"/><br /><br />
商品价格：<input type="text" ng-model="newPrice"/><br /><br />
商品数量：<input type="text" ng-model="newNum"/><br /><br />
<input type="button" ng-click="add()" value="提交" />
</form>
</center>
</body>

</html>

开心就好吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular数值的加减操作，如果为0，删除此条数据

var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.pros = [{ id: 1, name: "qq", price: 12.9, number: 2 }, { id: 2, nam
复制链接

扫一扫