AngularJS implement a simple shopping cart

Using ANGULARJS to implement a simple shopping cart, the main feeling is that powerful two-way bindings and focus-only objects do not pay attention to the interface features.

First look at the interface:

Click + + to operate and delete:

These all only need to manipulate the data source on the line, do not need to focus on the interface.

Implementation process:

One, use any language to create a server side:

     Public class Shoppingcar    {        publicstringgetset;}          Public decimal Get Set ; }          Public int Get Set ; }    }

         PublicActionResult Getcar () {List<ShoppingCar> cars =NewList<shoppingcar>            {                NewShoppingcar {title="Apple", count=1, unitprice=2.5m},                NewShoppingcar {title="Banana", count=3, unitprice=1.5m},                NewShoppingcar {title="Balsam Pear", count=1, unitprice=3.5m},                NewShoppingcar {title="Cucumber", count=3, unitprice=2.2m}            }; returnJson (Cars,jsonrequestbehavior.allowget); }         PublicActionResult Addcar (list<shoppingcar>car) {            returnJson ("OK", Jsonrequestbehavior.allowget); }

Second, the front office implementation:

    <DivNg-app= "DEMOAPP"Ng-controller= ' Cartcontroller '>        <Tableclass= "Table table-striped">            <thead>                <TR>                    <TD>Title</TD>                    <TD>Price</TD>                    <TD>Number</TD>                    <TD>Subtotal</TD>                    <TD>Delete</TD>                </TR>            </thead>            <tbody>                <TRng-repeat= "Item in Shoppingcar">                    <TD>{Item.} Title}}</TD>                    <TD>{Item.} UnitPrice}}</TD>                    <TD>                        <inputtype= "text"Ng-cloak Ng-model= "Item. Count "style= "Width:50px;text-align:center;">                        <ButtonMy-adds Ng-click= "Updatecar" (item. title,1) "Ng-class= "{cursors:true}">+</Button>                        <ButtonMy-minus Ng-click= "Updatecar" (item. title,-1) "Ng-class= "{cursors:true}">-</Button>                    </TD>                    <TD>{Item.} Count*item. UnitPrice | Number:2}}</TD>                    <TD><ButtonMy-minus Ng-click= "Updatecar" (item. title,-100) "Ng-class= "{cursors:true}">By deleting</Button></TD>                </TR>            </tbody>        </Table>        <PNg-init=0>Overall Price: {{total | number:2}}</P>        <Buttontype= "button"Ng-click= "Submit ()">Submit</Button>    </Div>

Third, angular part

    varApp = Angular.module (' DemoApp ', []); App.controller (' Cartcontroller ', [' $scope ', ' $http ',function($scope, $http) {$scope. Shoppingcar= {}        varGetcar =function() {$http. Get ('/employee/getcar '). Success (function(response) {$scope. Shoppingcar=response;            Gettotal ();        }); } $scope. Total= 0; varGettotal =function () {             for(vari = 0; I < $scope. Shoppingcar.length; i++) {                varitem =$scope.                Shoppingcar[i]; $scope. Total+ = Item. Count *item.            UnitPrice; }} $scope. Updatecar=function(title, count) { for(vari = 0; I < $scope. Shoppingcar.length; i++) {                varitem =$scope.                Shoppingcar[i]; if(item. Title = =title) {Item. Count= Item. Count + count;//Here you can increase the upper and lower limits                    if(item. Count < 0) {$scope. Shoppingcar.splice (i,1);        }}} gettotal (); } $scope. Submit=function() {$http. Post ('/employee/addcar ', $scope. Shoppingcar). Success (function(response) {alert (response);        });    } getcar (); }]);

AngularJS implement a simple shopping cart