ITPub博客

首页 > IT职业 > IT生活 > 用Angular.js代码,模仿淘宝购物车全选功能

用Angular.js代码,模仿淘宝购物车全选功能

IT生活 作者:boriszhang 时间:2021-09-09 09:21:54 0 删除 编辑

HTML :

                                                                                                                                                                                                                                               
{{ 'IMAGE' | translate }}{{ 'DESCRIPTION' | translate }}{{ 'VARIATION' | translate }}{{ 'PRICE' | translate }}{{ 'SELLER_INVENTORY' | translate }}{{ 'REQUEST_QUANTITIES' | translate }}{{ 'ACTION' | translate }}
图片描述{{row.description}}{{row.size}}{{row.priceCost}}{{row.usableQty}}{{row.purchaseQty}}                              
    
        
{{'PRODUCT_QUANTITY'|translate}}:             {{table.totalQuantity}}         
        
{{'TOTAL'|translate}}:             {{table.totalQty}}         
             

JS:

'use strict';

angular.module('app.xxx1').controller('demoController', function ($window, $uibModal, $stateParams, $element, $scope, $state, NgTableParams, productDataService) {

let sessionStorage = $window.sessionStorage;
this.checkboxes = {};
this.seller = null;

this.init = () => {
productDataService.getProductList({id: null}).then(res => {
this.tableData = res.data;
angular.forEach(this.tableData, (item) => {
this.tableDataList = item;
this.drawTable();
this.checkboxes[item[0].id] = {checked: true};
_.extend(this.tableDataList, {totalQty: 0, totalQuantity: 0});
angular.forEach(item, (r) => {
if (r.active === true) {
r.checked = true;
}
});
this.sumQty(item[0].id);
});
});
};

this.drawTable = () => {
this.tableParams = new NgTableParams({
count: 100
}, {
counts: [],
dataset: this.tableDataList
});
};
this.sumQty = (id) => {
let totalQty = 0;
let totalQuantity = 0;
angular.forEach(this.tableData[id], (item) => {
if (item.checked === true) {
totalQty += item.purchaseQty;
totalQuantity++;
}
});
this.tableData[id].totalQty = totalQty;
this.tableData[id].totalQuantity = totalQuantity;
};
this.selectedAll = (id) => {
let checked = this.checkboxes[id].checked;
angular.forEach(this.tableData[id], (item) => {
if (item.active === true) {
item.checked = checked;
}
});
this.sumQty(id);
};

this.selectedOne = (item) => {
let id = item.id;
let checked = item.checked;
if (!checked) {
this.checkboxes[id].checked = checked;
} else {
let activeItems = _.filter(this.tableData[id], (item) => {
return item.active;
});
let checkedAll = _.every(activeItems, (item) => {
return item.checked;
});
this.checkboxes[id].checked = checkedAll;
}
this.sumQty(id);
};

this.delete = (id) => {
productDataService.removeProduct({'id': id}).then(res => {
if (res.data === true) {
this.init();
}
});
};

this.confirmed = (table) => {
let activeItems = _.filter(table, (item) => {
return item.checked;
});
if (activeItems.length !== 0) {
let id = table[0].id;
sessionStorage.setItem('activeItems', JSON.stringify(activeItems));
$state.go('app.xxx2', {id: id});
}
};

});


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2435/viewspace-2802700/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-16

  • 博文量
    110
  • 访问量
    1069