zwq8299174 / angular-sku

angular sku siwtch Demo

angular-sku

demo：http://codepen.io/hzxs1990225/pen/VYyOdW

专栏：http://html-js.com/article/2734/

In your web page:

<div ui-sku split-str="#" init-sku="M#红色#男" sku-data="skuInfo" on-ok="callback($event)">
 <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['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>
       ...
     </ul>
   </div>
   ...
 </div>
</div>

<script src="angular.js"></script>
<script src="dist/angular-sku.min.js"></script>
<script>
var myapp = angular.module('skuApp', ['ui.angularSku']);

myapp.controller('skuController', function ($scope) {
  'use strict';
  $scope.type = 'parent';
  $scope.callback = function(count){
    $scope.count = count;
  }
  $scope.skuInfo = {

    'S#红色#男': {
      count: 0
    },
    'S#红色#女': {
      count: 0
    },
    ...
  }
});

组件接收4个参数skuData，splitStr，initSku，onOk

• skuData为组件结接收的数据(数据有一定格式，需要后台开发配合给)

     {
        'S#红色#男': {
          count: 0
        },
        'M#红色#女': {
          count: 0
        },
        'S#橙色#男': {
          count: 1
        },
       'M#橙色#女': {
          count: 1
        },
        .....
      }
  

• splitStr为不同key之间的分格缝（S#红色#男中指的是‘#’）

• initSku为默认设置的选中key（可以设置为M#红色#女）

• onOk点击key之后的callback（callback接受的参数为选择sku组合（例如'S#橙色#男'）对应的值）

@support IE>=8