Angularjs's Shopping Cart

Source: Internet
Author: User

<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" charset= "Utf-8" >
<title> Monthly Exam Practice </title>
<script src= "Js/angular.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script src= "Js/jquery-3.2.1.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
<style type= "Text/css" >

img{
width:140px;
height:150px;
}
select{
width:35%;
}
UL {
List-style:none;
padding-left:3px;
}

</style>
<body ng-app= "MyApp" ng-controller= "MyCtl" >

<select name= "" ng-model= "Paixu" >
<option value= "" > Sort by Requirements </option>
<option value= "M_time" > by price positive order </option>
<option value= "-m_time" > by Price reverse </option>
</select><input type= "text" placeholder= "Sort by name" ng-model= "CNAME"/><select name= "" ng-model= "Zhuangtai" >
<option value= "" > Search by Status </option>
<option value= "not shipped" > not shipped </option>
<option value= "shipped" > Shipped </option>
</select><br/>
<input type= "button" value= "Select All/Reverse" ng-click= "Xuan ()"/>
<input type= "button" value= "bulk Delete" ng-click= "PLSC ()"/>
<input type= "button" id= "" value= "emptying data" ng-click= "clear ()"/>
<input type= "button" id= "" value= "Add Data" ng-click= "Tian=!tian"/>

<div ng-show= "PPP" style= "width:100%; height:100%; text-align:center;line-height:200px; " > Data has been emptied </div>

<table border= "0" cellspacing= "0" cellpadding= "5" >
<tr ng-repeat= "G in Goods|orderby:paixu|filter:{m_name:cname,m_zhuangtai:zhuangtai}" >
<td><input type= "checkbox" Value= "{{g.m_name}}" class= "Ch1"/> </td>
<td></td>
<td>
<ul>
<li>{{g.m_name+ "--" +g.m_zhuangtai}}</li>
<li>{{g.m_type}}</li>
<li>{{g.m_time|date: "Yyyy-mm-dd"}}</li>
<li>
<span ng-hide= "Xiu" >{{g.m_price|currency: "¥"}}</span>
<input type= "text" value= "{{g.m_price}}" ng-show= "Xiu" ng-model= "G.m_price"/>
</li>
<li>
<input type= "button" value= "-" ng-click= "Jian (g.m_name)"/>
<span>{{g.m_num}}</span>
<input type= "button" value= "+" ng-click= "g.m_num=g.m_num+1"/>
</li>
<li>
<input type= "button" value= "delete" ng-click= "del (g.m_name)"/>
<input type= "button" value= "Modify" ng-hide= "Xiu" ng-click= "Xiu=!xiu"/>
<input type= "button" value= "Save" ng-show= "Xiu" ng-click= "Xiu=!xiu"/>
</li>
</ul>

</td>
</tr>


</table>
<span> Total Price: {{sum () |currency: "¥"}}</span>

<ul ng-show= "Tian" >
<span id= "" >
</span>
<li>
<input type= "text" placeholder= "Drug name" ng-model= "C_name"/>
<span ng-show= "QQ" style= "color:red;" >* name cannot be empty *</span>
</li>
<li>
<input type= "text" placeholder= "Drug Price" ng-model= "C_price"/>
<span ng-show= "QQQ" style= "color:red;" >* price cannot be less than 0*</span>
</li>
<li>
<input type= "text" placeholder= "Drug Quantity" ng-model= "C_num"/>
<span ng-show= "QQQQ" style= "color:red;" >* name cannot be negative *</span>
</li>
<li>
Origin:
<select ng-model= "province" ng-options= "a.province for A in addr" ng-change= "Changpo ()" ></select>
<select ng-model= "City" ng-options= "b.city for B in Province.citys" ></select>
</li>
<li>
<input type= "button" value= "Save" ng-click= "Save ()"/>
</li>
</ul>


<script type= "Text/javascript" >

var app = Angular.module ("MyApp", []);
App.controller ("MyCtl", Function ($scope, $http) {


$http. Get ("Data.json"). Then (function (req) {
$scope. Goods = Req.data;
})

Select all Reverse Selection
$scope. Xuan = function () {
var CDs = $ ("[Class=ch1]")
for (Var i=0;i<cds.length;i++) {
var cd = Cds[i];
cd.checked =!cd.checked;
}
}
Bulk Delete
$scope. PLSC = function () {
var CDs = $ ("[class=ch1]:checked");

if (Cds.length ==0) {
Alert ("Please check after action!") ");
} else {

for (var i =0;i<cds.length;i++) {

for (Var j =0;j< $scope. goods.length;j++) {

if ($scope. goods[j].m_name = = Cds[i].value) {

$scope. Goods.splice (j,1);
Break
}

}
}
}
}
Single Delete
$scope. del = function (name) {
if (Confirm ("Confirm delete?")) {
for (Var i=0;i< $scope. goods.length;i++) {
if ($scope. goods[i].m_name = = name) {
$scope. Goods.splice (i,1);
Return
}
}
}
}
Clear Data
$scope. Clear = function () {
$scope. goods = [];
$scope. PPP = TRUE;
}
Total Price
$scope. sum = function () {
var sum1=0;
for (Var i=0;i< $scope. goods.length;i++) {
sum1+= $scope. goods[i].m_price* $scope. Goods[i].m_num;
}
return sum1;
}
Quantity adjustment
$scope. Jian = function (name) {
for (Var i=0;i< $scope. goods.length;i++) {
if ($scope. goods[i].m_name = = name) {
if ($scope. Goods[i].m_num <=0) {
Return
}else{
$scope. goods[i].m_num--
}
}
}
}
Get Data
$http. Get ("Addr.json"). Then (function (obj) {
$scope. addr = Obj.data;
$scope. Province = $scope. Addr[0];
$scope. City = $scope. Province.citys[0];
})
$scope. Changpo = function () {
$scope. City = $scope. Province.citys[0];
}


Save data
$scope. Save = function () {

var z = $scope. c_name;
var x= $scope. C_price;
var c = $scope. C_num;
var v = $scope. province.province+ $scope. city.city;

if (z== "" | | | z== undefined | | Z==null) {
$scope. QQ = true;
Return
}else if (x== "" | | | x== undefined | | X==null | | x<0) {
$scope. QQQ = true;
Return
}else if (c== "" | | | c== undefined | | C==null | | c<0) {
$scope. QQQQ = true;

}else{
$scope. QQ, $scope. QQQ, $scope. QQQQ = false;
}

var add={
"M_name": Z,
"M_type": V,
"M_time": New Date (),
"M_price": X,
"M_zhuangtai": "Not Shipped",
"M_num": C,
"Picurl": "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000 &sec=1534939626&di=4636a3f923f09821f216c1eaee155fa5&src=http://pic.58pic.com/58pic/14/01/01/ 98d58picufa_1024.jpg "

}
$scope. Goods.push (add);
$scope. Tian = false;


}





})



</script>

</body>

Angularjs's Shopping Cart

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.