AngularJS(十三)复杂应用

一、html页面代码

页面展示结果

规格菜单栏显示

<div ng-repeat="pojo in specList">

 <div class="col-md-2 title">{{pojo.text}}</div>
 <div class="col-md-10 data">
                    <!-- 

                ng-repeat="option in pojo.options" : 循环对应规格选项列表
                {{pojo.text}}：显示规格的名称
                {{option.optionName}} ： 显示每个选项的名称
                ng-click：点击调用方法
                修改规格选项的属性
                updateSpecAttribute($event,pojo.text,option.optionName);
                通过规格选项对象，动态创建sku列表
                createSKUTable();
            -->
    <span ng-repeat="option in pojo.options">
        <input
                ng-click=
                  "updateSpecAttribute($event,pojo.text,option.optionName);
                   createSKUTable();"
            type="checkbox"> 
           {{option.optionName}}
    </span>
 </div>
</div>

sku商品列表显示

<table class="table table-bordered table-striped table-hover dataTable">
        <thead>
            <tr>
                <!-- 循环规格选项，获取每个规格名称 -->
                <th ng-repeat="item in entity.tbGoodsDesc.specificationItems"
                    class="sorting">{{item.attributeName}}</th>

                <th class="sorting">价格</th>
                <th class="sorting">库存</th>
                <th class="sorting">是否启用</th>
                <th class="sorting">是否默认</th>
            </tr>
        </thead>
        <tbody>
            <!-- 
            ng-repeat="pojo in entity.itemList":循环商品列表获取每个商品名称
            ng-repeat="item in entity.tbGoodsDesc.specificationItems"：
                                  循环规格选项，获取每个规格名称
            pojo.spec：获取spec属性，通过规格的名称[item.attributeName]，获取规格选项的值 

            -->
            <tr ng-repeat="pojo in entity.itemList">
                <td ng-repeat="item in entity.tbGoodsDesc.specificationItems">{{pojo.spec[item.attributeName]}}</td>
                <td><input ng-model="pojo.price" class="form-control"
                    placeholder="价格" value="3000.00"></td>
                <td><input ng-model="pojo.stockCount" class="form-control"
                    placeholder="库存数量"></td>
                <td><input ng-model="pojo.status" ng-true-value="1"
                    ng-false-value="0" checked="checked" type="checkbox"></td>
                <td><input ng-model="pojo.isDefault" ng-true-value="1"
                    ng-false-value="0" checked="checked" type="checkbox"></td>
            </tr>
        </tbody>
    </table>

二、控制层方法

    // 1.点击动态修改规格数组
    //传入点击事件，规格名称，规格选项值
    $scope.updateSpecAttribute=function($event,name,value){

        var specList=  $scope.entity.tbGoodsDesc.specificationItems;
        /**便利规格数组、规格数组拼接格式为：
        [  
           {
            "attributeName":"手机屏幕尺寸",
            "attributeValue":["5寸","5.5寸","6寸"]
            },
           {
            "attributeName":"网络",
            "attributeValue":["联通2G","移动2G"]
            }
        ]
        */
        // 1.循环数组，查询在数组中是否存在 name
        for(var i= 0;i<specList.length;i++){
            // 1.1如果选项名称存在，进行更新
            if(specList[i].attributeName==name){
                // 2.1如果是选中，添加属性
                if($event.target.checked){
                    specList[i].attributeValue.push(value); 
                }else{
                    //2.2否则是取消选中
                    // 获取该元素的角标
                    var index = specList[i].attributeValue.indexOf(value);
                    // 通过角标删除元素
                    specList[i].attributeValue.splice(index,1);

                    //2.3、如果该属性对象的选项全部未被选择，删除该属性
                    if(specList[i].attributeValue.length == 0){
                        //获取该名称规格对象的角标
                        var index = specList.indexOf(specList[i]);
                        //移除该对象
                        specList.splice(index,1);
                    };
                }
                // 如果找到元素，停止便利
                return;
            }

        }
        // 1.2如果名称不存在,增加一行元素
        specList.push({attributeName:name , attributeValue:[value]})

    };

    // 2.拼接sku商品表
    $scope.createSKUTable=function(){
        var list=[{ "spec":{}, "price":0,"stockCount":99999,"status":'0',"isDefault":'0'}]; // 初始化集合
        var specList = $scope.entity.tbGoodsDesc.specificationItems;
        // 循环规格
        //spec属性的数据格式
        //"spec":{"网络":"电信2G","手机屏幕尺寸":"5寸"}
        for(var i = 0; i<specList.length;i++){
            // 向原集合添加列信息
            list=addColumn(list,specList[i].attributeName,specList[i].attributeValue);

        }
        // 封装商品 SKU 列表
        $scope.entity.itemList=list;

    };

    // 3.添加列属性的方法
    addColumn=function(list,columnName,columnValues){
        // 创建一个新集合
        var newList = [];

        for(var i=0;i<list.length;i++){
            // 取出原行
            var oldRow = list[i];
            // 循环规格属性，组装新行
            for(var j=0;j<columnValues.length;j++){
                // 深度克隆一行（先将对象转换成字符串，再解析橙对象，就会产生新的对象）
                var newRow = JSON.parse(JSON.stringify(oldRow));
                //为该行添加规格属性
                newRow.spec[columnName] = columnValues[j];
                // 将新行添加到新的集合
                newList.push(newRow);
            }

        }
        //返回新的集合
        return newList;

    };