原网址:http://sentsin.com/web/1069.html   demo : https://codepen.io/hzxs1990225/pen/VYyOdW  修复版文件下载：https://github.com/WangChangyao/sku.js

　　首先感谢这位博主，使用这个插件也是费了一顿力气，莫名的出现好几个坑。当你只看原网址之后开始使用，你会发现在ui-sku自定义指令的html内部使用angular指令好像失效，因为ui-sku自定义指令已经将作用域改变了。

　　　　使用之前还需在index.html angular.module中注入：‘ ui.angularSku’

<div ui-sku>

　　　　　　<div ng-repeat:"x in X" id='circle'>

　　　　　　　　<h1> </h1>

　　　　　　</div>

　　　</div>

index.html:  .controller('name',function($scope){

　　　　　　$scope.X=[1,2,3,4,5,6];

　　　});       //这样没有任何效果，#circle div不会循环。因为此时X作用域不在这个控制器下。那么我们是不是要将这个X的赋值写在 插件.js 文件里。那么问题来了，index.html里的请求的数据怎么可能在那个文件下写。

答案：好像只有传值的办法了，怎么传过去呢。先讲解下源代码。

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="demo.css"/>
<title>Angular SKU Demo</title>
</head>
<body ng-app="skuApp" ng-cloak>
<section ng-controller="skuController" class="m-detail">
<div class="m-detail">
<div class="row"><h1 class="title">5折ONLY秋装新品雪纺衬衫领A字无袖连衣裙裙子女</h1></div>
<div ui-sku split-str="#" sku-data="skuInfo" style='position: ;' on-ok="callback($event)" eles-data="reelement"  init-sku="M#红色#男">     //在这里初始化：添加ui-sku开始组合查询，代码里其他类名没有特殊意义。不用刻意的去研究。eles-data为自定义的，用于解决传值的问题，也就是解决上面的问题。这个需要在angular.js插件中改一下源码。后面介绍。

<div class="row f-cb">
<div class="l-col">价格</div>
<div class="r-col price"><span class="yen">¥</span> 259.00</div>
</div>
<div class="row f-cb">
<div class="l-col">尺码</div>
<div class="r-col">
<ul class="m-sku f-cb" >
<li ng-repeat="elem in rement"><span ng-class="{'js-seleted': keyMap['{{elem}}'].selected, 'js-disabled': keyMap['{{elem}}'].disabled}" ng-click="onSelect(elem)">{{elem}}</span></li>
<!--<li><span ng-class="{'js-seleted': keyMap['S'].selected, 'js-disabled': keyMap['S'].disabled}" ng-click="onSelect('S')">S</span></li>
<li><span ng-class="{'js-seleted': keyMap['M'].selected, 'js-disabled': keyMap['M'].disabled}" ng-click="onSelect('M')">M</span></li>
<li><span ng-class="{'js-seleted': keyMap['L'].selected, 'js-disabled': keyMap['L'].disabled}" ng-click="onSelect('L')">L</span></li>
<li><span ng-class="{'js-seleted': keyMap['XL'].selected, 'js-disabled': keyMap['XL'].disabled}" ng-click="onSelect('XL')">XL</span></li>
<li><span ng-class="{'js-seleted': keyMap['ML'].selected, 'js-disabled': keyMap['ML'].disabled}" ng-click="onSelect('ML')">ML</span></li>
<li><span ng-class="{'js-seleted': keyMap['人妖'].selected, 'js-disabled': keyMap['人妖'].disabled}" ng-click="onSelect('人妖')">人妖</span></li>-->
</ul>
</div>
</div>
<div class="row f-cb">
<div class="l-col">颜色</div>
<div class="r-col">
<ul class="m-sku f-cb">
<li><span ng-class="{'js-seleted': keyMap['红色'].selected, 'js-disabled': keyMap['红色'].disabled}" ng-click="onSelect('红色')">红色</span></li>
<li><span ng-class="{'js-seleted': keyMap['橙色'].selected, 'js-disabled': keyMap['橙色'].disabled}" ng-click="onSelect('橙色')">橙色</span></li>
<li><span ng-class="{'js-seleted': keyMap['黄色'].selected, 'js-disabled': keyMap['黄色'].disabled}" ng-click="onSelect('黄色')">黄色</span></li>
<li><span ng-class="{'js-seleted': keyMap['绿色'].selected, 'js-disabled': keyMap['绿色'].disabled}" ng-click="onSelect('绿色')">绿色</span></li>
<li><span ng-class="{'js-seleted': keyMap['蓝色'].selected, 'js-disabled': keyMap['蓝色'].disabled}" ng-click="onSelect('蓝色')">蓝色</span></li>
<li><span ng-class="{'js-seleted': keyMap['紫色'].selected, 'js-disabled': keyMap['紫色'].disabled}" ng-click="onSelect('紫色')">紫色</span></li>
</ul>
</div>
</div>
<div class="row f-cb">
<div class="l-col">性别</div>
<div class="r-col">
<ul class="m-sku f-cb">
<li><span ng-class="{'js-seleted': keyMap['男'].selected, 'js-disabled': keyMap['男'].disabled}" ng-click="onSelect('男')">男</span></li>
<li><span ng-class="{'js-seleted': keyMap['女'].selected, 'js-disabled': keyMap['女'].disabled}" ng-click="onSelect('女')">女</span></li>

</ul>
</div>
</div>
</div>
<div class="row f-cb">
<div class="l-col">库存</div>
<div class="r-col account">{{count||805}}件</div>
</div>
</div>
</section>
<script src="angular.min.js"></script>
<script src="angular-sku.js"></script>

<script src="demo.js">

　　// 这里对$scope.skuInfo进行赋值，固定的数据格式：$scope.skuInfo = {"S#红色#男": {"count": 0,jf:1,price:2,},"S#红色#女": {"count": 0},"S#橙色#男": {"count": 1,},"S#橙色#女": {"count": 1}}。。。。。。

      //当有XXXXL这个号但没其他规格，那么只需增加这样的数据格式：“XXXXL##” :{"count" :1};同理当有人妖没其他号和颜色时增加数据格式："##人妖":{count : 1};

</script>

特别注意看一下上面带颜色的几行。是不是找到传值的答案了，$scope.skuInfo是在index的控制器里定义的，但通过“sku-data” 这个属性将值传到了angular-sku这个控件里。那么我们也创建一个将值传过去。

这里是angular-sku文件里的代码，在这里增加了 elesData：‘=’，用于传值。然后将这个值传给$scope.categoryAttrs,那么index.html ui-sku组件中绑定的categoryAttrs变量就为这个值，angular-sku充当中转站的角色。

细心的朋友会发现，我这里用到了$timeout()来赋值处理，因为index.html有请求，数据会异步，当主页中还在请求数据，代码已经执行到这里，那么就会赋值失败。

那么坑又来了：$scope.skuInfo这个数据是在请求中获取得到的，所以也会异步，当执行到angu-sku.js时，$scope.skuInfo为undefined。该怎么解决？

    1.延迟加载sku.js文件？？    不可行，怎么注入：ui.angularSku。先注入只会报错，系统找不到这个模块。

　2.像 elesData一样延迟传过来。但并不能阻止sku.js后面的代码对$scope.skuInfo这个数据的处理。会报错： input sku-data error;

   所以也让后面的代码延迟执行，加个监听器

将整个link函数中要执行的代码放进这个延时器中。

似乎好像没有坑了：接下来是不是还要对选中的规格进行数据处理啊。是不是在点击事件中取到被选中的规格名称。比如选中S 橙色 男，那么怎样取到呢？ng-click？已经被占用了。况且这个作用域也在sku.js中，所以也调用不了index下的函数。

但demo.js中是不是将S 橙色 男匹配到的count值通过callback给返回了，那么sku.js文件中也就帮我们取到了这“S” “橙色” “男”三个匹配的名称。我们也通过callback给返回到index利用。sku.js作以下修改：

每一次点击

都会通过callback将选中的值给打印出来，如图会打印一个数组["M","红色","男"]。

使用说明：skuInfo数组需要严格按照 颜色#大小#重量：{count:11,imgUrl:".....",price:""}规范。categoryATTRS数组需要按照[{kind1:[type1,type2,type3]},{kind2:[type1,type2,type3]},.......]规范。

　　　　　所以需要把各分类下的规格不重复的放在这个分类下的数组里

　　　　　

angularJS 与angujs-sku实现购物车组合查询的更多相关文章

  1. 淘宝SKU组合查询算法实现

    淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报  分类: JavaScript(14)    目录(?)[+]   前端有多少事情可以做,能做到多 ...

  2. 使用avalon实现SKU组合查询功能

    SKU(stock keeping unit库存量单位)组合查询是网上商场一个非常常用的功能.具体来说,一件商品会有许多型号,许多颜色,许多产地,许多码寸,而满足用户选中的这些条件的具体商品可能有库存 ...

  3. 9.1.2 asp.net core 自动生成组合查询

    在做系统的时候,经常遇到前台录入一大堆的查询条件,然后点击查询提交后台,在Controller里面生成对应的查询SQL或者表达式,数据库执行再将结果返回客户端. 例如如下页面,输入三个条件,日志类型. ...

  4. webform 分页、组合查询综合使用

    界面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx ...

  5. linq分页组合查询

    一.linq高级查 1.模糊查(字符串包含) 1 public List<User> Select(string name) 2 { 3 return con.User.Where(r = ...

  6. 关系数据库SQL之高级数据查询:去重复、组合查询、连接查询、虚拟表

    前言 接上一篇关系数据库SQL之基本数据查询:子查询.分组查询.模糊查询,主要是关系型数据库基本数据查询.包括子查询.分组查询.聚合函数查询.模糊查询,本文是介绍一下关系型数据库几种高级数据查询SQL ...

  7. Web 组合查询加 分页

    使用ADO.NET 数据访问技术制作web端组合查询加分页的功能关键在于查询SQL语句的拼接 以Car 表为例 每页显示3条数据 数据访问类使用查询方法,tsql 查询的连接字符串,查询的参数放到Ha ...

  8. ajax分页与组合查询配合使用

    使用纯HTML页与js.ajax.Linq实现分页与组合查询的配合使用 <body> <div id="top"><input type=" ...

  9. Thinkphp查询 1.查询方式 2.表达式查询 3.快捷查询 4.区间查询 5.组合查询 6.统计查询 7.动态查询 8.SQL 查询

    1.使用字符串作为条件查询 $user = M('User'); var_dump($user->where('id=1 AND user="蜡笔小新"')->sele ...

随机推荐

  1. phpexcel导出成绩表

    效果图如下: 代码如下:代码注释不全,请大家参考phpexcel中文帮助手册 <?php require_once 'PHPExcel.php'; function bfb($n) { retu ...

  2. JFinal极速开发框架使用笔记

    记录第一次使用JFinal,从简单的框架搭建到增删改查,从自带的方法到正常框架习惯的使用方式. JFinal官网:http://www.jfinal.com/ JFinal 是基于 Java 语言的极 ...

  3. centos 7 部署 汉化版 gitlab

    =============================================== 2017/11/12_第6次修改                       ccb_warlock 更 ...

  4. Sublime Text 使用教程

    Sublime Text 是一款非常轻量级而且功能十分强大的编辑器,支持大量插件,深受前端开发者的喜爱.多的不说,我们直接进入正题. 1.下载 ①.官网下载地址:http://www.sublimet ...

  5. 鸟哥的linux私房菜学习-（五）补充：重点回顾

    为了避免瞬间断电造成的Linux系统危害,建议做为服务器的Linux主机应该加上不断电系统来持续提供稳定的电力: 默认的图形模式登陆中,可以选择语系以及作业阶段.作业阶段为多种窗口管理员软件所提供,如 ...

  6. java 泛型基础问题汇总

    泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法. Java语言引 ...

  7. grep命令及基本正则表达式

    grep命令是Linux系统中一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. grep可用于shell脚本,因为grep通过返回一个状态值来说明搜索的状态,如果模板搜索成功 ...

  8. TypeScript VS JavaScript 深度对比

    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 Jav ...

  9. Server Tomcat v7.0 Server at localhost failed to start.

    1:这里记录一下这个错误,反正百度一大推,但是很长很长,我感觉这个问题肯定是servlet引起的,因为我遇到的总是如此: 2:我的问题如下所示: <servlet> <servlet ...

  10. python3之File文件方法

    1.读写文件 open()将会返回一个file对象,基本语法: open(filename,mode) filename:是一个包含了访问的文件名称的路径字符串 mode:决定了打开文件的模式:只读, ...