Home > Developer > Web Develop
Respect the fruits of labor, reprint please indicate the source (http://blog.csdn.net/sllailcp/article/details/47833315) ...
Beginner Angularjs spare time to do a small case.
Function: Calculates the price of the shopping cart item and deletes the shopping cart item.
The following is a complete case (jquery and Angularjs need to be introduced themselves)
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<style>
. Cursors{cursor:pointer}
</style>
<script src= "Js/jquery-1.11.1.js" ></script>
<script src= "Js/angular.min.js" ></script>
<script>
var a=angular.module (' myApp ', []);
Shopping Cart Plus
A.directive (' Myadds ', function () {
return {
Link:function (scope, element, attr) {
Element.click (function () {
var this=this
Angular.foreach (Scope.datalist,function (Data,index,array) {
if (Attr.items==data.items) {
Data.num=parseint (data.num) +1;
Scope.allprices ();
Scope. $apply ()//Refresh View
}
});
});
}
}
})
Shopping cart minus
A.directive (' Myminus ', function () {
return {
Link:function (scope, element, attr) {
Element.click (function () {
var this=this
Angular.foreach (Scope.datalist,function (Data,index,array) {
if (Attr.items==data.items) {
if (data.num<=1) {
if (Confirm (' Delete the Product ')}) {
data.num=0;
$ (this). Siblings (' input '). val (0);
Scope.allprices ();
Scope. $apply ();
Delete Array[index];
Scope.dataList.splice (index,1)
$ (this). Parents (' tr '). Remove ();
}
}else{
Data.num=parseint (Data.num)-1;
};
Scope.allprices ();
Scope. $apply ();
}
});
});
}
}
})
Select all, not select all
A.directive (' Allorcan ', function () {
return function (scope, element, attr) {
Element.click (function () {
var ischeck=$ (this). Find (' input '). Prop (' checked ');
if (Ischeck) {
$ (' input[type=checkbox] '). Prop (' checked ', true);
}else{
$ (' input[type=checkbox] '). Not ($ (' input[type=checkbox] '). EQ (0)). Prop (' checked ', false);
}
Angular.foreach (Scope.datalist,function (Data,index,array) {
Data. Bol=ischeck;
})
Scope.allprices ();
Scope. $apply ();
})
}
})
Radio
A.directive (' Onecheck ', function () {
return function (scope, element, attr) {
Element.click (function () {
var this=this
Angular.foreach (Scope.datalist,function (Data,index,array) {
if (Attr.items==data.items) {
var ischeck=$ (this). Prop (' checked ');
Data. Bol=ischeck;
Scope.allprices ();
Scope. $apply ();
}
})
});
}
})
A.controller (' Myangular ', [' $scope ', ' $filter ', function ($scope, $filter) {
$scope. datalist=[//initializing the shopping cart data
{Bol: ' false ', Name: ' Washing machine ', num: ' 1 ', items: ' 0 ', Oneprice: ' ", Price: '},
{Bol: ' false ', name: ' Water heater ', num: ' 1 ', Items: ' 1 ', Oneprice: ' A ', Price: '},
{Bol: ' false ', Name: ' Air-conditioner ', num: ' 1 ', Items: ' 2 ', Oneprice: ' ' $ ', Price: '},
{Bol: ' false ', name: ' Refrigerator ', num: ' 1 ', Items: ' 3 ', Oneprice: ' 2087 ', Price: '},
{Bol: ' false ', Name: ' Cooker ', num: ' 1 ', Items: ' 4 ', Oneprice: ' 135 ', Price: '},
{Bol: ' false ', Name: ' Quilt ', num: ' 1 ', Items: ' 5 ', Oneprice: ' ", Price: '},
{Bol: ' false ', Name: ' book ', num: ' 1 ', Items: ' 6 ', Oneprice: ' 2 ', Price: '},
{Bol: ' false ', name: ' Pen ', num: ' 1 ', Items: ' 7 ', Oneprice: ' + ', Price: '},
{Bol: ' false ', Name: ' Cup ', num: ' 1 ', Items: ' 8 ', Oneprice: ' ", Price: '},
{Bol: ' false ', Name: ' book ', num: ' 1 ', Items: ' 9 ', Oneprice: ' 5 ', Price: '},
{Bol: ' false ', Name: ' Snack ', num: ' 1 ', Items: ' Ten ', Oneprice: ' + ', Price: '}
];
Calculation of Total Price
$scope. Allprices=function () {
$scope. allprice=0;
Angular.foreach ($scope. Datalist,function (Data,index,array) {
Data.price=data.num*data.oneprice;
if (data. Bol==true) {
$scope. Allprice+=parseint (Data.price);
}
})
return $scope. Allprice;
};
Sort by Unit Price
$scope. Cartsort=function (ARG) {
Angular.foreach ($scope. Datalist,function (Data,index,array) {
arguments.callee[' Cartsort (' +arg+ ') ']=!arguments.callee[' Cartsort (' +arg+ ') '
$scope. datalist= $filter (' by ") ($scope. datalist,arg,arguments.callee[' Cartsort (' +arg+ ') ')
})
}
}])
</script>
<body ng-controller= "Myangular" >
<table border= "1" >
<tr>
<td><label all-orcan><input type= "checkbox" > select All/Deselect all </label></td>
<td> name </td>
<td> Quantity </td>
<TD ng-click= ' Cartsort ("Oneprice") > Unit Price </td>
<td> Price </td>
</tr>
<TR ng-repeat= "Data in DataList" >
<td><input type= "checkbox" One-check items={{data.items}}></td>
<TD ng-cloak>{{data.name}}</td>
<td><input type= "text" Ng-cloak ng-model= "Data.num" items= "{{data.items}}" style= "Width:50px;text-align: Center; " > <button My-adds items= "{{data.items}}" ng-class= "{cursors:true}" >+</button> <button My-minus Items= "{{data.items}}" ng-class= "{cursors:true}" >-</button> </td>
<TD ng-cloak>{{data.oneprice}}</td>
<TD ng-cloak>{{data.price}}</td>
</tr>
</table>
<div> Total Price: {{allprices ()}}</div>
</body>
<!--<script>alert (0) </script>-->
Effect:
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Angularjs Making shopping cart function
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
