<!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写的购物车
原文地址：https://www.cnblogs.com/gaotime/p/9526067.html