（angularjs ）购物车案例
上代码：
html>
<html>
<head><meta charset="utf-8" /><title>购物title><link rel="stylesheet" href="bootstrap.min.css" /><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script><script src="bootstrap.min.js">script><script src="jquery-2.1.0.js">script><style>span{padding-left:50px;padding-right:60px;}style><script>var app=angular.module('myApp',[]);app.controller('myCtrl',function($scope){//声明数据对象，初始化商品信息
$scope.shopList=[{ name:'单片机',price:'80.90',num:1},{ name:'电烙铁',price:'20.40',num:1},{ name:'万用表',price:'46.90',num:1},{ name:'示波器',price:'21.10',num:1},{ name:'电饭锅',price:'79.30',num:1}];//点击减少
$scope.reduce= function (index) {if($scope.shopList[index].num>1){$scope.shopList[index].num--;}else{$scope.remove(index);}};//点击增加
$scope.add=function(index){$scope.shopList[index].num++;};//计算总价
$scope.allSum=function(){var allPrice = 0;for(var i= 0;i<$scope.shopList.length;i++){allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;}return allPrice;};//计算总数量
$scope.allNum=function(){var allShu=0;for(var i=0;i<$scope.shopList.length;i++){allShu+=$scope.shopList[i].num;}return allShu;};//移除一项
$scope.remove=function(index){if(confirm('您是否将商品移除购物车？')){$scope.shopList.splice(index,1);}};//使得输入框中不得小于等于0
$scope.change=function(index){if($scope.shopList[index].num>=1){}else{$scope.shopList[index].num=1;}};//清空购物车
$scope.removeAll=function(){if(confirm('确定清空购物车')){$scope.shopList=[];}}});script>
head>
<body ng-app="myApp">
<div class="container"><h1>我的购物车h1><div ng-controller="myCtrl"><button class="btn btn-warning "ng-click="removeAll()" style="background-color:#D9534F; color: white; margin-left:10px;">清空购物车button><ul class="list-group"><li class="list-group-item"><span><input type="checkbox" ng-model="select_all"/>span><span>namespan><span>pricespan><span>numberspan><span>totalPricespan><span>optionspan>li>
<li ng-repeat="shop in shopList" class="list-group-item"><span><input ng-model="select_all" type="checkbox" />span><span>{{shop.name}}span><span>{{shop.price|currency : '￥'}}span><span> <button ng-click="reduce($index)" style="background-color:#337AB7;">-button> <input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)" style="width: 30px;"> <button ng-click="add($index)" style="background-color:#337AB7;">+button> span><span>{{shop.price*shop.num|currency : '￥'}}span><button class="btn btn-primary btn-xs" ng-click="remove($index)" style="background-color:#337AB7;">删除button>li><li class="list-group-item">总价为：￥<span ng-bind="allSum()">span>li>ul>div>
div>
body>
html>
上图片：
需要注意导包：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script>
<script src="bootstrap.min.js">script>
<script src="jquery-2.1.0.js">script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！