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

最新推荐文章于 2021-03-08 05:29:48 发布

czbkzmj

最新推荐文章于 2021-03-08 05:29:48 发布

阅读量99

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/czbkzmj/article/details/82897588

版权

JAVA 专栏收录该内容

476 篇文章 1 订阅

订阅专栏

商品详情页-前端逻辑
3.1 购买数量加减操作
3.1.1 加入 angularJS 库
Java之品优购课程讲义_day12（6）
将 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 规格选择
最终我们需要实现的效果：
Java之品优购课程讲义_day12（6）
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>

czbkzmj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java之品优购课程讲义_day12（6）

商品详情页-前端逻辑3.1 购买数量加减操作3.1.1 加入 angularJS 库将 angularJS 库加入 d:\item 下 3.1.1 前端控制层将 base.js 拷贝到 js 目录下在 js 目录下构建 controller 文件夹，创建 itemController.js//商品详细页（控制层）app.controller('itemController'...
复制链接

扫一扫