|
商品详情页-前端逻辑 3.1 购买数量加减操作3.1.1 加 入 angularJS 库 将 angularJS 库加入 d:\item 下
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 规格选择 最终我们需要实现的效果： 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>
| 
收藏
淘帖
踩
