AngularJS购物车应用实战-优快云博客

本文链接：https://blog.youkuaiyun.com/zyj1871435871/article/details/79840782

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.css1{
background-color: yellow;
}
.css2{
background-color: red;
}
</style>
</head>
<body ng-controller="Dem">
<div>
<input type="text" placeholder="请输入要查询的商品名称" ng-model="search" />

<button ng-click="deleteAll()">批量删除</button>
</div>

<table border="2" bordercolor="pink">
<tr>
<td> <input type="checkbox" ng-click="allXuan()" ng-model="selectAll" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>

<tr ng-repeat="x in Product" class="{{$even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="x.state"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" value="{{x.numss}}" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.numss*x.price}}</td>
<td><input type="button" ng-click="rmove($index)" value="删除"/></button></td>
</tr>

</table>
<div>
<span>总价:</span> <span>{{totalPrices()}}</span>
<span>数量:</span> <span>{{numAll()}}</span>
</div>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
//初始化-------
var App = angular.module("App",[]);

App.controller("Dem",function($scope){
//给Product定义数据
$scope.Product = [{
id: 1000,
name: "iPhone8",
numss: 1,
price: 8888,
state:false
}, {
id: 1001,
name: "iPhone9",
numss: 1,
price: 9888,
state:false
}, {
id: 1002,
name: "iPhone2s",
numss: 1,
price: 3888,
state:false
}, {
id: 1003,
name: "iPhone7P",
numss: 1,
price: 10088,
state:false
}];

//加减的方法
$scope.add = function(index){
$scope.Product[index].numss++;
}
$scope.jian = function(index){
if($scope.Product[index].numss>=1){
$scope.Product[index].numss--;
}
}
//删除的方法
$scope.rmove = function(index){
if(confirm("确定删除吗？")){
$scope.Product.splice(index,1);
}
}
//总价的方法
$scope.totalPrices = function(){
var totalPrices = 0;
for(var x=0;x<$scope.Product.length;x++){
totalPrices+= $scope.Product[x].numss*$scope.Product[x].price;
}
return totalPrices;
}
$scope.numAll = function(){
var aaa = 0;
for(var x=0;x<$scope.Product.length;x++){
aaa+=$scope.Product[x].numss;
}
return aaa;
}
//批量删除的
$scope.deleteAll = function(){
var arr= [];
for(var x=0;x<$scope.Product.length;x++){
//如果checkbox的状态是true 那就是他被选中了
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
if(arr.length<=0){
confirm("请选中在删除");
}else{
//如果数组的长度大于0 那就直接删除
for(index in arr){
for(index1 in $scope.Product){
if(arr[index] == $scope.Product[index1].name){
$scope.Product.splice(index1,1);
}
}
}
}
}

//全选的操作
var selectAll = false;
$scope.allXuan = function(){
if($scope.selectAll){
for (index in $scope.Product){
$scope.Product[index].state = true;
}

}else{
for (index in $scope.Product){
$scope.Product[index].state = false;
}
}
}


});



</script>
</body>
</html>

h2月