angular JS購物車
阿新 • • 發佈：2018-11-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/ionic.min.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<script>
var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope) {
$scope.items = [{
name:"純手工製作木質時鐘精緻傢俱",
price:150,
num:1,
url:"img/a.jpg",
done:false
},{
name:"純手工製作木質時鐘",
price:119,
num:2,
url:"img/b.jpg"
},{
name:"純手工製作時鐘精緻傢俱",
price:120,
num:0,
url:"img/c.jpg",
done:false
}];
//減少
$scope.less=function(index){
if($scope.items[index].num==0)
{
alert("不能再減了");
}else{
$scope.items[index].num-=1;
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
}
//增加
$scope.more=function(index)
{
$scope.items[index].num+=1;
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
//刪除
$scope.del=function(name){
var nameitem=[];
for(index in $scope.items)
{
if(name==$scope.items[index].name)
{
nameitem.push(name);
}
}
if(nameitem.length>0)
{
for(index in nameitem)
{
var names=nameitem[index];
for(index2 in $scope.items)
{
if(names==$scope.items[index2].name)
{
$scope.items.splice(index2,1);
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
}
}
}
}
//全選
$scope.selectAll=false;
$scope.allPrice=0;
$scope.checkSelAll=function(){
if($scope.selectAll)
{
for(index in $scope.items)
{
$scope.items[index].done=false;
}
$scope.selectAll=false;
$scope.allPrice=0;
}else{
for(index in $scope.items)
{
$scope.items[index].done=true;
}
for(index in $scope.items)
{
$scope.allPrice=$scope.items[index].num*
$scope.items[index].price+$scope.allPrice;
}
$scope.selectAll=true;
}
}
//每選中一個,計算一下
$scope.selectItem=function(index)
{
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
});
</script>
<style>
#myInput {
margin-right: 40px;
margin-left: 50px;
}
img{vertical-align:middle;margin-top: 6px;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar align-title="center" class="bar-positive">
<h1 class="title">購物車</h1>
</ion-header-bar>
<ion-content>
<ion-checkbox ng-model="isChecked">趣藝工坊</ion-checkbox>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="item in items">
<div style="width: 100%; height: 100px;">
<div style="float: left;">
<input id="myInput" type="checkbox" ng-model="item.done" ng-click="selectItem($index)"/>
<img src="{{item.url}}" />
</div>
<div style="float: left; margin-left: 50px;">
<span>{{item.name}}</span><br/><br/>
<span >{{item.price|currency:"￥："}}</span><br /><br />
<button ng-click="less($index)">-</button>
{{item.num}}
<button ng-click="more($index)">+</button>
<span style="margin-left: 200px;" ng-click="del(item.name)">刪除</span>
</div>
</div>
</ion-item>
</ion-list>
<div style="width: 100%; height: 100px; margin-top: 50px;">
<input id="selectAll" type="checkbox" ng-model="selectAll" ng-click="checkSelAll()" />全選
<span style="margin-left: 250px;">合計：<span>{{allPrice | currency:"￥："}}</span></span>
<button style="margin-left: 50px;">結算</button>
</div>
</ion-content>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/ionic.min.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<script>
var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope) {
$scope.items = [{
name:"純手工製作木質時鐘精緻傢俱",
price:150,
num:1,
url:"img/a.jpg",
done:false
},{
name:"純手工製作木質時鐘",
price:119,
num:2,
url:"img/b.jpg"
},{
name:"純手工製作時鐘精緻傢俱",
price:120,
num:0,
url:"img/c.jpg",
done:false
}];
//減少
$scope.less=function(index){
if($scope.items[index].num==0)
{
alert("不能再減了");
}else{
$scope.items[index].num-=1;
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
}
//增加
$scope.more=function(index)
{
$scope.items[index].num+=1;
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
//刪除
$scope.del=function(name){
var nameitem=[];
for(index in $scope.items)
{
if(name==$scope.items[index].name)
{
nameitem.push(name);
}
}
if(nameitem.length>0)
{
for(index in nameitem)
{
var names=nameitem[index];
for(index2 in $scope.items)
{
if(names==$scope.items[index2].name)
{
$scope.items.splice(index2,1);
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
}
}
}
}
//全選
$scope.selectAll=false;
$scope.allPrice=0;
$scope.checkSelAll=function(){
if($scope.selectAll)
{
for(index in $scope.items)
{
$scope.items[index].done=false;
}
$scope.selectAll=false;
$scope.allPrice=0;
}else{
for(index in $scope.items)
{
$scope.items[index].done=true;
}
for(index in $scope.items)
{
$scope.allPrice=$scope.items[index].num*
$scope.items[index].price+$scope.allPrice;
}
$scope.selectAll=true;
}
}
//每選中一個,計算一下
$scope.selectItem=function(index)
{
$scope.allPrice=0;
for(index in $scope.items){
if($scope.items[index].done)
{
$scope.allPrice=$scope.allPrice+$scope.items[index].price*$scope.items[index].num;
}
}
}
});
</script>
<style>
#myInput {
margin-right: 40px;
margin-left: 50px;
}
img{vertical-align:middle;margin-top: 6px;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar align-title="center" class="bar-positive">
<h1 class="title">購物車</h1>
</ion-header-bar>
<ion-content>
<ion-checkbox ng-model="isChecked">趣藝工坊</ion-checkbox>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="item in items">
<div style="width: 100%; height: 100px;">
<div style="float: left;">
<input id="myInput" type="checkbox" ng-model="item.done" ng-click="selectItem($index)"/>
<img src="{{item.url}}" />
</div>
<div style="float: left; margin-left: 50px;">
<span>{{item.name}}</span><br/><br/>
<span >{{item.price|currency:"￥："}}</span><br /><br />
<button ng-click="less($index)">-</button>
{{item.num}}
<button ng-click="more($index)">+</button>
<span style="margin-left: 200px;" ng-click="del(item.name)">刪除</span>
</div>
</div>
</ion-item>
</ion-list>
<div style="width: 100%; height: 100px; margin-top: 50px;">
<input id="selectAll" type="checkbox" ng-model="selectAll" ng-click="checkSelAll()" />全選
<span style="margin-left: 250px;">合計：<span>{{allPrice | currency:"￥："}}</span></span>
<button style="margin-left: 50px;">結算</button>
</div>
</ion-content>
</body>
</html>