Java之品优购课程讲义

商品详情页-前端逻辑
3.1 购买数量加减操作
3.1.1 加入 angularJS 库

将 angularJS 库加入 d:\item 下
3.1.1 前端控制层
将 base.js 拷贝到 js 目录下
在 js 目录下构建 controller 文件夹，创建 itemController.js

//商品详细页（控制层）app.controller('itemController',function($scope){//数量操作$scope.addNum=function(x){$scope.num=$scope.num+x; if($scope.num<1){
$scope.num=1;}}});
在方法中控制数量不能小于 1

3.1.1 模板
引入 js

<script type="text/javascript" src="plugins/angularjs/angular.min.js">    </script><script type="text/javascript" src="js/base.js">  </script><script type="text/javascript" src="js/controller/itemController.js"> </script>

添加指令

<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1">
调用操作数量的方法

<div class="controls"><input autocomplete="off" type="text" value="{{num}}" minnum="1" class="itxt" /><a  href="javascript:void(0)" class="increment plus" ng-click="addNum(1)"  >+</a><a  href="javascript:void(0)"  class="increment  mins" ng-click="addNum(-1)">-</a></div>

3.1 规格选择
最终我们需要实现的效果：

3.1.1 前端控制层
修改 itemController.js

$scope.specificationItems={};//记录用户选择的规格
//用户选择规格
$scope.selectSpecification=function(name,value){$scope.specificationItems[name]=value;}//判断某规格选项是否被用户选中$scope.isSelected=function(name,value){ if($scope.specificationItems[name]==value){
return true;}else{return false;}}

3.1.1 模板
页面调用控制器的方法

<dd><a class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}"ng-click="selectSpecification('${specification.attributeName}','${item}')">${item}<span  title="点击取消选择"> </span></a></dd>

转载于:https://blog.51cto.com/13517854/2287533

Java之品优购课程讲义_day12（6）相关推荐

Java之品优购课程讲义_day12（2）
1.1 FTL指令 1.1.1 assign指令此指令用于在页面上定义一个变量 (1)定义简单类型: <#assign linkman="周先生"> 联系人:${l ...
Java之品优购课程讲义_day19（6）
品优购-秒杀下单 4.1 需求分析商品详细页点击立即抢购实现秒杀下单,下单时扣减库存.当库存为 0 或不在活动期范围内时无法秒杀. 4.2 后端代码 4.2.1 服务接口层修改 pinyougo ...
Java之品优购课程讲义_day05（8）
5.1 最简单的 FastDFS架构 5.1 FastDFS安装 FastDFS 安装步骤非常繁琐,我们在课程中不做要求.已经提供单独的<FastDFS 安装部署文档>供学员们课后阅读. ...
Java之品优购课程讲义_day05（4）
电商概念及表结构分析 2.1 电商概念 SPU与 SKU SPU = Standard Product Unit ( 标准产品单位 ) SPU 是商品信息聚合的最小单位,是一组可复用.易检索 ...
Java之品优购课程讲义_day01（8）
4.1.1 商家管理后台构建 web 模块 pinyougou-shop-web 与运营商管理后台的构建方式类似.区别: (1)定义 tomcat 的启动端口为 9102 (2)springmvc. ...
Java之品优购课程讲义_day17（2）
结算页-收件人地址选择 2.1 需求与数据库分析 2.1.1 需求描述在结算页实现收件人地址选择功能 2.1.2 数据库结构分析 Tb_address 为地址表 2.1 准备工作 2.1.1 生成代 ...
Java之品优购课程讲义_day16（2）
2.1 后端控制层实现思路: (1)从 cookie 中取出购物车 (2)向购物车添加商品 (3)将购物车存入 cookie pinyougou-cart-web 工程新建 CartControll ...
Java之品优购课程讲义_day20（5）
资源过滤与变量替换修改 pom.xml ,在 build 节点中添加如下配置 <filters><filter>src/main/resources/filters/db_$ ...
Java之品优购课程讲义_day20（2）
秒杀商品列表的增量更新每分钟执行查询秒杀商品表,将符合条件的记录并且缓存中不存在的秒杀商品存入缓存 /*** 刷新秒杀商品 */@Scheduled(cron="0 * * * * ?&q ...
Java之品优购课程讲义_day08（7）
4.1.1 Hash类型操作创建测试类 TestHash (1)存入值 @Test public void testSetValue(){ redisTemplate.boundHashOps(&q ...

Java之品优购课程讲义_day12（6）

Java之品优购课程讲义_day12（6）相关推荐

最新文章

热门文章