前台页面组合列表实现

结果描述:

1552482662339.png

代码实现:

addColumn()这个方法采用深克隆的原因:

假如:

上面这张图就是$scope.entity.goodsDesc.specificationItems的属性值,在第一次循环之后$scope.entity.itemList的值为

(https://upload-images.jianshu.io/upload_images/8781623-ebca75c06fb01a59.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如果不采用深克隆的方式,在进行第二次循环的时候,就会出现覆盖的情况

(https://upload-images.jianshu.io/upload_images/8781623-691b7f1202ff3790.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

变为

1552483743982.png

即第一条记录被第二条覆盖,因为所添加是同一个对象

  getItemLIst()这个方法绑定每个选项input标签上
   $scope.getItemList = function () {
        $scope.entity.itemList = [{spec:{},price:0,num:9999,status:'0',isDefault:'0'}];
        var itemList = $scope.entity.goodsDesc.specificationItems;

        for (var i = 0; i < itemList.length; i++) {
            $scope.entity.itemList = addColumn($scope.entity.itemList,itemList[i].attributeName,itemList[i].attributeValue);
            console.log($scope.entity.itemList);
        }
    }

    addColumn = function (list, columnName, columnValue) {
        var newList = [];
        for (var i = 0;i < list.length;i++){
            var item = list[i];
            for (var j = 0;j < columnValue.length;j++){
                var itemTemp = JSON.parse(JSON.stringify(item));
                itemTemp.spec[columnName] = columnValue[j];
                newList.push(itemTemp);
            }
        }
        return newList;
    }

不深克隆的addColumn()方法

addColumn = function (list, columnName, columnValue) {
        var newList = [];
        for (var i = 0;i < list.length;i++){
            var item = list[i];
            for (var j = 0;j < columnValue.length;j++){
                // var itemTemp = JSON.parse(JSON.stringify(item));
                item.spec[columnName] = columnValue[j];
                newList.push(itemTemp);
            }
        }
        return newList;
    }