标签：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>
标签：price javascrip stat options style .com 数据 ati 保存数据
原文地址：https://www.cnblogs.com/gaotime/p/9526067.html
