黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day12（6） [打印本页]

作者: 谷粒姐姐 时间: 2018-9-29 14:08
标题: 【郑州校区】Java之品优购课程讲义_day12（6）

商品详情页-前端逻辑

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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2