AngularJs实现商品购物车综合案例完整
2018-01-18 14:41
483 查看
概述
主要功能就是结合 Html5+AngularJs+Jquery 实现简易的商品增删改查,以及模糊查询,排序,批量删除等功能预览效果
入库
模糊查询
先把需要依赖的jar包导入(Angularjs包以及jquery包)
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
其次准备数据源
数据源的获取有两种 一种是通过angular提供的网络服务来获取网络数据,另一种是通过本地获取数据 第一种是通过angular提供的网络服务,是$http 它的使用方法很简单,如下<script type="text/javascript"> var app = angular.module("test", []); //定义一个module 即为模块,angular的初始化应用程序 app.controller("mycontroller", function($scope, $http) { //绑定控制器,注入$http 网络服务 $scope.jsonFromNet = ""; //定义一个空变量用来接受数据 $http({ method: "get", //请求方式 url: "http://gank.io/api/data/Android/10/1" //请求地址 }).then(function success(response) { //返回成功或者失败 $scope.jsonFromNet = response.data; }).then(function error(response) { });
</script>
定义好在表格中使用只需要遍历数据即可 (代码片段部分)
<tr ng-repeat="g in jsonFromNet.results | orderBy:orderByKey | filter:{desc:search}"> //遍历,变量后面是返回的json数据对象 <td>{{$index}}</td> <td>{{g.type}}</td> <td>{{g.source}}</td> <td>{{g.desc}}</td> <td>{{g.publishedAt | date:"MM-dd HH:mm"}}</td> //实现对日期的过滤 <td>{{g.who}}</td> <td> <input type="button" ng-click="deleteAll($index)" value="删除" class="btn btn-danger" /> <input type="button" ng-click="updateAll($index)" value="修改" class="btn btn-success" /> </td> </tr>另一种是通过本地获取数据 (本文采用的就是本地数据)//准备初始数据
//准备初始数据 var date1 = new Date("2017-9-01 10:10:10"); var date2 = new Date("2017-1-02 10:10:10"); var date3 = new Date("2017-1-03 10:10:10"); $scope.goods = [{ name:"云南白药", num:100, address:"云南", price:19.911, date:date1, flag:true, ck:false },{ name:"999感冒灵", num:30, address:"北京", price:12.511, date:date2, flag:true, ck:false },{ name:"感康云", num:20, address:"河北", price:16.611, date:date3, flag:true, ck:false }];
基本界面搭建 主体部分
实现点击增加数量,修改价格,来改变小计以及最后的总价,产生联动的效果
<body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>汇明药店商品信息</h3> <input type="text" ng-model="search" style="border: 2px solid red;" placeholder="请输入搜索关键字"/> <input type="text" ng-model="search1" style="border: 2px solid red;" placeholder="请输入搜索关键字"/> <select ng-model="orderByKey"> <option value="">--请选择--</option> <option value="num">数量升序</option> <option value="-num">数量降序</option> <option value="price">价格升序</option> <option value="-price">价格降序</option> </select> <input type="button" value="入库" ng-click="ifAdd();"/><br /><br /> <input type="button" value="批量删除" ng-click="deleteMore();" /><br /> <table ng-show="showTitle" > <tr style="background-color: #006400;"> <th width="80"><input type="checkbox" ng-model="uu"/></th> <th width="80">序号</th><th width="80">名字</th> <th width="120" ng-click="orderByKey='num'">数量</th><th width="80">地址</th> <th width="80" ng-click="orderByKey='price'">价格</th><th >日期</th><th width="80">小计</th><th >操作</th></tr> <tr align="center" ng-repeat="g in goods | orderBy:orderByKey | filter:{name:search,address:search1}"> <td><input type="checkbox" ng-checked="uu" ng-model="g.ck" name='g.name'/></td> <td>{{$index}}</td> <td>{{g.name}}</td> <td><input type="button"value="-" ng-click="g.num=g.num-1;getAllPrice();"/> {{g.num}} <input type="button"value="+" ng-click="g.num=g.num+1;getAllPrice();"/> </td> <td>{{g.address}}</td> <!-- 价钱列 --> <td ng-dblclick="g.flag=false"><span ng-show="g.flag">{{g.price}}</span> <input ng-hide="g.flag" ng-model="g.price" ng-change="getAllPrice();" ng-blur="g.flag=true;" type="text" /></td> <td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td> <td>{{g.price*g.num | number:2}}</td> <td> <input type="button"value="删除" ng-click="deleteGood($index);"/> <input type="button" value="修改" ng-click="updateGood($index);"/> </td> </tr> <!--<tr><td colspan="8">{{goods}}</td></tr>---> </table><br /> 总价:<span>{{allPrice | number:2}}</span> <div ng-show="ifFlag"> 名字:<input type="text" placeholder="输入名字" ng-model="newname" /><br /> 数量:<input type="text" placeholder="输入数量" ng-model="newnum"/><br /> 地址:<input type="text" placeholder="输入地址" ng-model="newaddress"/><br /> 价格:<input type="text" placeholder="输入价格" ng-model="newprice"/><br /><br /> <input type="button" id="btn1" value="添加" ng-click="addGood();"/> </div> </center> </body>
js部分
//搜索条件 $scope.search=""; $scope.search1=""; $scope.orderByKey = ""; //入库相关 $scope.ifFlag = false; //点击 入库 是否显示下方的输入区域 $scope.ifAdd = function(){ $scope.ifFlag = !$scope.ifFlag; } //添加商品 $scope.newname=""; $scope.newnu ac23 m=""; $scope.newaddress=""; $scope.newprice=""; $scope.updateIndex = 0; $scope.addGood = function(){ if($("#btn1").val() == "添加"){ //创建good对象 var good = { name:$scope.newname, num:$scope.newnum, address:$scope.newaddress, price:parseFloat($scope.newprice), date:new Date(), flag:true }; if($scope.goods.length == 0){//此次添加,如果table没有出现,先显示 $scope.showTitle = true; } $scope.goods.unshift(good); $scope.ifFlag = false;//添加完后,自动隐藏输入区域 }else{ $scope.goods[$scope.updateIndex ].name = $scope.newname; $scope.goods[$scope.updateIndex ].num = $scope.newnum; $scope.goods[$scope.updateIndex ].address = $scope.newaddress; $scope.goods[$scope.updateIndex ].price = $scope.newprice; } } $scope.showTitle = true; //删除商品 $scope.deleteGood = function($index){ if(confirm("确认删除吗?")){ $scope.goods.splice($index,1);//在goods数组中删除此商品 //从新获得总价 $scope.getAllPrice();//调用计算总价的函数 if($scope.goods.length == 0){ $scope.showTitle = false; } }else{ alert("您取消了删除!"); } } //修改 $scope.updateGood = function($index){ $scope.updateIndex = $index; //显示修改区域 $scope.ifFlag = true; $("#btn1").val("修改"); $scope.newname=$scope.goods[$index].name; $scope.newnum=$scope.goods[$index].num; $scope.newaddress=$scope.goods[$index].address; $scope.newprice=$scope.goods[$index].price; } //总计 $scope.allPrice = 0; $scope.getAllPrice = function(){ var count = 0; for(index in $scope.goods){//遍历goods,得到索引 count += $scope.goods[index].price*$scope.goods[index].num; } $scope.allPrice = count; } $scope.getAllPrice();//调用计算总价的函数 //减号 $scope.jian1 = function($index){ $scope.goods[$index].num = $scope.goods[$index].num-1; $scope.getAllPrice();//调用计算总价的函数 } $scope.ckchange = function(){ var ss = $scope.goods; debugger; } $scope.deleteMore = function(){ debugger; for(var i=$scope.goods.length-1;i>=0;i--){ var _ck = $scope.goods[i]; if(_ck.ck){ $scope.goods.splice(i,1); } } } }); </script>
小结
anularjs 提供了很好的数据双向绑定,在实际的操作过程中只需要关注数据本身就可以,比如修改单价,紧接着angular会自动更新小计和总价实现联动的效果,这一点是其他前端框架所不能及的,希望这个案例对你们有帮助,谢谢!相关文章推荐
- AngularJS购物车案例,点击删除,没有商品显示为空
- angularJS商品购物车案例
- Android中的延迟加载系列5 (综合案例 含完整代码及工程下载)
- Ecshop模板开发(五):商品详情页购物车和立即购买的实现
- Android实现仿淘宝购物车增加和减少商品数量功能demo示例
- bootstrap angularjs 实现jsp页面购物车
- 商品添加购物车实现动画效果
- SQLite实现数据持久化存储小案例之购买商品
- 框架页面JS实现各种级别直接的页面跳转@刷新页面@框架集的综合案例
- 轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
- angularjs实现简单的购物车功能
- AngularJs实现购物车
- 自定义ASP.NET AJAX拖放功能示例程序:实现IDragSource和IDropTarget接口将商品拖放至购物车中
- angularjs实现购物车
- AngularJS自定义指令实现面包屑功能完整实例
- 用Cookie实现购物车中只显示最近浏览的五件商品
- bootstrap angularjs 实现jsp页面购物车
- ASP.NET实现B2C显示购物车中的商品
- JQuery UI 关于拖拉商品到购物车构思的简单实现
- 第110课: Spark Streaming电商广告点击综合案例通过updateStateByKey等实现广告点击流量的在线更新统计