A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

商品详情页-前端逻辑
3.1 购买数量加减操作
3.1.1 加 入 angularJS
angularJS 库加入 d:\item 图片1.png
3.1.1 前端控制层
将 base.js 拷贝到 js 目录下
在 js 目录下构建 controller 文件夹,创建 itemController.js
[AppleScript] 纯文本查看 复制代码
//商品详细页(控制层)

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
[AppleScript] 纯文本查看 复制代码
<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>
添加指令
[AppleScript] 纯文本查看 复制代码
<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1">
调用操作数量的方法
[AppleScript] 纯文本查看 复制代码
<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 规格选择
最终我们需要实现的效果:
图片2.png
3.1.1 前端控制层
修改 itemController.js
[AppleScript] 纯文本查看 复制代码
$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 模板
页面调用控制器的方法
[AppleScript] 纯文本查看 复制代码
<dd>

<a class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}"

ng-click="selectSpecification('${specification.attributeName}','${item}')">

${item}

<span  title="点击取消选择"> </span>

</a>

</dd>



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马