亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

用Angular.js代碼,模仿淘寶購物車全選功能

HTML :

<div ng-controller="demoController as $ctrl" ng-repeat="table in $ctrl.tableData" >
    <table ng-table="$ctrl.tableParams" class="table table-condensed">
        <thead>
        <th><input type="checkbox" ng-model="$ctrl.checkboxes[table[0].id].checked" class="select-all" ng-click="$ctrl.selectedAll(table[0].id)"/></th>
        <th>{{ 'IMAGE' | translate }}</th>
        <th>{{ 'DESCRIPTION' | translate }}</th>
        <th>{{ 'VARIATION' | translate }}</th>
        <th>{{ 'PRICE' | translate }}</th>
        <th>{{ 'SELLER_INVENTORY' | translate }}</th>
        <th>{{ 'REQUEST_QUANTITIES' | translate }}</th>
        <th>{{ 'ACTION' | translate }}</th>
        </thead>
        <tbody>
        <tr ng-repeat="row in table">
            <td><input type="checkbox" ng-model="row.checked" ng-click="$ctrl.selectedOne(row)"/></td>
            <td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{row.productImage}}" alt=""></td>
            <td>{{row.description}}</td>
            <td>{{row.size}}</td>
            <td>{{row.priceCost}}</td>
            <td>{{row.usableQty}}</td>
            <td>{{row.purchaseQty}}</td>
            <td>
                <button class="btn" ng-click="$ctrl.delete(row.id)">{{'BTN_DELETE'|translate}}</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        <div>{{'PRODUCT_QUANTITY'|translate}}:
            <span>{{table.totalQuantity}}</span>
        </div>
        <div>{{'TOTAL'|translate}}:
            <span>{{table.totalQty}}</span>
        </div>
        <button class="btn" ng-click="$ctrl.confirmed(table)">{{'BTN_CONFIRM'|translate}}</button>
    </div>
</div>

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});
}
};

});


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 1
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消