標籤：price javascrip stat options style .com 資料 ati 儲存資料
<!DOCTYPE html>
<html>
<head>
<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>月考練習</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>
</head>
<body ng-app="myapp" ng-controller="myCtl">
<select name="" ng-model="paixu">
<option value="">按要求排序</option>
<option value="m_time">按價格正序</option>
<option value="-m_time">按價格倒序</option>
</select><hr />
<input type="text" placeholder="根據名稱排序" ng-model="cname"/><hr />
<select name="" ng-model="zhuangtai">
<option value="">根據狀態查詢</option>
<option value="未發貨">未發貨</option>
<option value="已發貨">已發貨</option>
</select><br />
<input type="button" value="全選/反選" ng-click="xuan()"/>
<input type="button" value="大量刪除" ng-click="plsc()"/>
<input type="button" id="" value="清空資料" ng-click="clear()"/>
<input type="button" id="" value="添加資料" ng-click="tian=!tian"/>
<div ng-show="ppp" style="width: 100%; height: 100%; text-align: center;line-height: 200px;">資料已清空</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><img src="{{g.picUrl}}"/></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="刪除" ng-click="del(g.m_name)"/>
<input type="button" value="修改" ng-hide="xiu" ng-click="xiu=!xiu"/>
<input type="button" value="儲存" ng-show="xiu" ng-click="xiu=!xiu"/>
</li>
</ul>
</td>
</tr>
</table>
<span>總價格:{{sum()|currency:"￥"}}</span>
<ul ng-show="tian">
<span id="">
<h1>添加資料</h1>
</span>
<li>
<input type="text" placeholder="藥品名稱" ng-model="c_name"/>
<span ng-show="qq" style="color: red;">*名稱不可為空*</span>
</li>
<li>
<input type="text" placeholder="藥品價格" ng-model="c_price"/>
<span ng-show="qqq" style="color: red;">*價錢不能小於0*</span>
</li>
<li>
<input type="text" placeholder="藥品數量" ng-model="c_num"/>
<span ng-show="qqqq" style="color: red;">*名稱不能為負*</span>
</li>
<li>
產地：
<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="儲存" 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;
})
//全選反選
$scope.xuan = function(){
var cds = $("[class=ch1]")
for (var i=0;i<cds.length;i++) {
var cd = cds[i];
cd.checked = !cd.checked;
}
}
//大量刪除
$scope.plsc = function(){
var cds = $("[class=ch1]:checked");
if(cds.length ==0){
alert("請選中後操作！");
} 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
}
}
}
}
}
//單個刪除
$scope.del = function(name){
if(confirm("確認刪除嗎?")){
for (var i=0;i<$scope.goods.length;i++) {
if ($scope.goods[i].m_name == name) {
$scope.goods.splice(i,1);
return;
}
}
}
}
//清空資料
$scope.clear = function(){
$scope.goods = [];
$scope.ppp = true;
}
//總價格
$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;
}
//數量調整
$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--
}
}
}
}
//擷取資料
$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];
}
//儲存資料
$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": "未發貨",
"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>
</html>
angularjs寫的購物車
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
