本文介绍了一个使用Angular.js实现的购物车效果案例。该案例通过HTML和JavaScript实现了商品选择、数量增减及总价计算等功能，并伴有相应的样式变化。
分享一段代码实例，它实现了购物车效果，能够实时计算商品的总价格。
并且选中产品的时候，有相关样式的变化，代码实例如下:
<!doctype html><html><head><metacharset="utf-8"><title>购物车效果</title><scripttype="text/javascript"src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js"></script><styletype="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><divclass="container"ng-app="cartApp"ng-controller="cartCtrl"><divclass="wrap"><ul><liclass="{{fruit.buy?'active':''}}"ng-repeat="fruit in fruits"item={{fruit.id}}><pclass="contentW">名称：{{fruit.name}}</p><pclass="contentW">单价：{{fruit.price}}</p><pclass="contentW">数量：<ahref="javascript:;"class="calc {{fruit.num<=1?'nobuy':''}}"ng-click="overdue(fruit.id)">-</a><span>{{fruit.num}}</span><ahref="javascript:;"class="calc {{fruit.num>=10?'nobuy':''}}" ng-click="add(fruit.id)">+</a></p><divclass="buttonW"><divclass="checkbox"><inputtype="checkbox"id="{{fruit.id}}"ng-model="fruit.buy"><spanclass="box"></span></div><labelclass="addc"for="{{fruit.id}}">添加到购物车</label></div></li></ul><divclass="price"><p>总价：{{totalPrice()}}<ahref="javascript:;">去结算</a></p></div></div></div><scripttype="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>
扫一扫
1868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
