1 <HTML>2 <Head>3 <MetaCharSet= "Utf-8">4 <Scriptsrc= "Js/angular.js"></Script>5 <Scriptsrc= "Js/mult_app.js"></Script>6 <Linkrel= "stylesheet"href= "Css/bootstrap.css">7 <style>8 . Nested{9 Border:1px solid Red;Ten Margin-left:2em; One padding:1em; A } - </style> - </Head> the <BodyNg-app= "MYAPP"> - multiple shopping carts in the//angularjs version - <DivNg-controller= "MyCar"> - <ulng-repeat= "Item in Carlist"> + <Li>Number of name {{Item.name}} <spanNg-click= "Minus (item.index)">-</span> {{Item.num}} <spanNg-click= "Plus (item.index)">+</span>price {{Item.price}} - <spanNg-click= "Remove (item.index)">Delete</span> + </Li> A </ul> at Total Price {{Totalprice}} - </Div> - </Body> - </HTML>
1 var app = Angular.module ("MyApp", []);2 3 var Carlist = [{4 name: "Milk",5 price:20,6 num:17 },{8 name: "Flowers",9 Price:5,Ten num:1 One },{ A name: "Fruit", - Price:10, - num:1 the },{ - name: "Egg", - Price:2, - num:1 + }]; - function Wrapdata (data) { +for (var i =0; i<Data. length; i++) { A Data[i].index= i; at Data[i].initprice= Data[i].price; - } - } - function Store (namespace, data) { - if (arguments.length>1) { - Localstorage.setitem (namespace, json.stringify (data)); in }else { - var obj = Localstorage.getitem (namespace); to return (obj && json.parse (obj)) | | null + } - } the function Gettotalprice (data) { * var totalprice = 0; $for (var i =0; i<Data. length; i++) {Panax Notoginseng totalprice+= Data[i].num* Data[i].initprice - } the return totalprice; + } A Wrapdata (Carlist); the + - App.controller ("MyCar", function ($scope) { $ //Module Scope $ $scope. Carlist= Store (' Mycar ')| | | Carlist; - $scope. Totalprice= Gettotalprice (Carlist); - $scope. $watch ("Carlist", Function (NewValue, oldvalue) { the $scope. Totalprice= Gettotalprice ($scope. Carlist); - Store (' Mycar ', $scope. Carlist);Wuyi }, True); the $scope. Remove= function (index) { - $scope. Carlist.splice (index, 1); Wu } - $scope. Plus= function (index) { About $scope. Carlist[index].num + +; $ $scope. Carlist[index].price += $scope. Carlist[index].initprice; - } - $scope. Minus= function (index) { - $scope. Carlist[index].num--; A $scope. Carlist[index].price-= $scope. Carlist[index].initprice; + } the }); - $ App.controller ("Anotherctrl", function ($scope) { the $scope. Firstuser= ' Peter '; the });
Angular initial use--simple shopping cart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
