Home > Developer > Web Develop
<! 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
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
