分享一段代码实例,它实现了购物车效果,能够实时计算商品的总价格。
并且选中产品的时候,有相关样式的变化,代码实例如下:
001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>购物车效果</
title
>
<
script
type
=
"text/javascript"
src
=
"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js"
></
script
>
<
style
type
=
"text/css"
>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.6%;
font-family: "Microsoft Yahei",sans-serif;
line-height: 1;
}
a {
text-decoration: none;
color: grey;
}
ul, li {
list-style: none;
}
.checkbox {
vertical-align: middle;
display: inline-block;
width: 20px;
height: 20px;
position: relative;
}
.checkbox .box {
border-radius: 4px;
position: absolute;
display: block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
transition: all 0.5s;
}
.checkbox input[type="checkbox"] {
position: absolute;
z-index: 10;
opacity: 0;
}
.checkbox input:checked + .box {
border-color: red;
}
.checkbox input:checked + .box::after {
position: absolute;
display: block;
content: ' ';
width: 10px;
height: 10px;
background-color: red;
top: 3px;
left: 3px;
}
body {
font-size: 1.4rem;
}
.wrap {
margin-top: 3rem;
}
.wrap ul {
display: block;
width: 100%;
margin-bottom: 3rem;
}
.wrap li {
margin: 1rem auto;
text-align: center;
width: 20rem;
height: 16rem;
padding: 1rem;
border: 0.4rem solid #ccc;
border-radius: 0.8rem;
transition: all 0.5s;
}
.wrap li.active {
border-color: rgb(218, 30, 30);
}
.contentW {
font-size: 1.6rem;
height: 3.2rem;
text-align: left;
}
.buttonW a {
display: inline-block;
padding: 0.8rem 0.6rem;
background-color: rgb(218, 30, 30);
color: #fff;
font-size: 1.6rem;
border-radius: 0.4rem;
}
.buttonW .addc {
vertical-align: middle;
display: inline-block;
}
a.calc {
display: inline-block;
vertical-align: middle;
border: 1px solid #999;
width: 22px;
height: 22px;
text-align: center;
}
.contentW span {
display: inline-block;
vertical-align: middle;
}
.buttonW a.cancel {
background-color: #FFE47C;
}
.price {
display: table;
margin: 0 auto;
}
.price p {
font-size: 1.8rem;
}
.price a {
display: inline-block;
background: rgb(218,30,30);
padding: 0.8rem 2rem;
margin-left: 1rem;
color: #fff;
border-radius: 0.8rem;
}
a.nobuy {
border-color: #eee;
background-color: #ccc;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
ng-app
=
"cartApp"
ng-controller
=
"cartCtrl"
>
<
div
class
=
"wrap"
>
<
ul
>
<
li
class
=
"{{fruit.buy?'active':''}}"
ng-repeat
=
"fruit in fruits"
item={{fruit.id}}>
<
p
class
=
"contentW"
>
名称:{{fruit.name}}
</
p
>
<
p
class
=
"contentW"
>
单价:{{fruit.price}}
</
p
>
<
p
class
=
"contentW"
>
数量:
<
a
href
=
"javascript:;"
class
=
"calc {{fruit.num<=1?'nobuy':''}}"
ng-click
=
"overdue(fruit.id)"
>-</
a
>
<
span
>{{fruit.num}}</
span
>
<
a
href
=
"javascript:;"
class="calc {{fruit.num>=10?'nobuy':''}}" ng-click="add(fruit.id)">+</
a
>
</
p
>
<
div
class
=
"buttonW"
>
<
div
class
=
"checkbox"
>
<
input
type
=
"checkbox"
id
=
"{{fruit.id}}"
ng-model
=
"fruit.buy"
>
<
span
class
=
"box"
></
span
>
</
div
>
<
label
class
=
"addc"
for
=
"{{fruit.id}}"
>添加到购物车</
label
>
</
div
>
</
li
>
</
ul
>
<
div
class
=
"price"
>
<
p
>
总价:{{totalPrice()}}
<
a
href
=
"javascript:;"
>去结算</
a
>
</
p
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
var fruits = [{
id: 'fruit1',
name: "苹果",
price: "10",
num: 1,
buy: false
}, {
id: 'fruit2',
name: "香蕉",
price: "1",
num: 1,
buy: false
}, {
id: 'fruit3',
name: "橘子",
price: "20",
num: 1,
buy: false
}];
angular.module('cartApp', [])
.controller('cartCtrl', function($scope) {
//取出水果
$scope.fruits = fruits;
//点击-事件
$scope.overdue = function(id) {
angular.forEach($scope.fruits, function(value, key) {
if (value.id == id && value.num > 1) {
$scope.fruits[key].num--;
}
});
}
$scope.add = function(id) {
angular.forEach($scope.fruits, function(value, key) {
if (value.id == id && value.num < 10) {
$scope.fruits[key].num++;
}
});
}
$scope.totalPrice = function() {
$scope.total = 0;
angular.forEach($scope.fruits, function(value, key) {
if (value.buy) {
$scope.total = $scope.total + value.price * value.num;
}
});
console.log($scope.total)
return $scope.total;
}
});
</
script
>
</
body
>
</
html
>