1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <script src="js/angular.js"></script> 5 <script src="js/mult_app.js"></script> 6 <link rel="stylesheet" href="css/bootstrap.css"> 7 <style> 8 .nested { 9 border: 1px solid red; 10 margin-left: 2em; 11 padding: 1em; 12 } 13 </style> 14 </head> 15 <body ng-app="MyApp"> 16 //angularjs版本的多个购物车 17 <div ng-controller="MyCar"> 18 <ul ng-repeat="item in carList"> 19 <li>名字{{item.name}} 数量 <span ng-click="minus(item.index)">-</span> {{item.num}} <span ng-click="plus(item.index)">+</span> 价格{{item.price}} 20 <span ng-click="remove(item.index)">删除</span> 21 </li> 22 </ul> 23 总价 {{totalPrice}} 24 </div> 25 </body> 26 </html>
1 var app = angular.module("MyApp", []); 2 3 var carList = [{ 4 name: "牛奶", 5 price: 20, 6 num: 1 7 },{ 8 name: "鮮花", 9 price: 5, 10 num: 1 11 },{ 12 name: "水果", 13 price: 10, 14 num: 1 15 },{ 16 name: "鸡蛋", 17 price: 2, 18 num: 1 19 }]; 20 function wrapData(data){ 21 for(var i =0; i< data.length; i++) { 22 data[i].index = i; 23 data[i].initPrice = data[i].price; 24 } 25 } 26 function store(namespace, data) { 27 if(arguments.length > 1) { 28 localStorage.setItem(namespace, JSON.stringify(data)); 29 }else { 30 var obj = localStorage.getItem(namespace); 31 return (obj && JSON.parse(obj)) || null 32 } 33 } 34 function getTotalPrice(data){ 35 var totalPrice = 0; 36 for(var i =0; i< data.length; i++) { 37 totalPrice+= data[i].num * data[i].initPrice 38 } 39 return totalPrice; 40 } 41 wrapData(carList); 42 43 44 app.controller("MyCar", function($scope) { 45 //模块作用域 46 $scope.carList = store('mycar') || carList; 47 $scope.totalPrice = getTotalPrice(carList); 48 $scope.$watch("carList", function(newvalue, oldvalue){ 49 $scope.totalPrice = getTotalPrice($scope.carList); 50 store('mycar', $scope.carList); 51 }, true); 52 $scope.remove = function(index){ 53 $scope.carList.splice(index, 1); 54 } 55 $scope.plus = function(index){ 56 $scope.carList[index].num ++; 57 $scope.carList[index].price += $scope.carList[index].initPrice; 58 } 59 $scope.minus = function(index){ 60 $scope.carList[index].num --; 61 $scope.carList[index].price -= $scope.carList[index].initPrice; 62 } 63 }); 64 65 app.controller("AnotherCtrl", function($scope) { 66 $scope.firstUser = 'Peter'; 67 });