angular实现一个简易电商购物车效果代码-html代码-BFW代码库

angular实现一个简易电商购物车效果代码

代码语言：html

代码描述：angular实现一个简易电商购物车效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angular购物车的实现</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.1.2.js"></script>

</head>
<body ng-app>

    <div style="margin-left:auto; margin-right:auto; width:600px; padding-top:30px">
        <input type="text" name="" value="" ng-model="abc" placeholder="输入关键字快速查找">{{abc}}
    </div>

    <div ng-controller="cartController" class="container">
        <table class="table" ng-show="cart.length">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名字</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in cart| filter:abc">
                    <td ng-bind="item.id"></td>
                    <td ng-bind="item.name"></td>
                    <td>
                        <button type="button" ng-click="reduce(item.id)" class="btn btn-primary btn-sm">-</button>
                        <input type="text" ng-model="item.quantity" style="text-align: center;width:30px;">
                        <button type="button" ng-click="add(item.id)" class="btn btn-primary btn-sm">+</button>
                    </td>
                    <td ng-bind="item.price"></td>
                    <td ng-bind="item.price*item.quantity"></td>
                    <td><button type="button" ng-click="remove(item.id)" class="btn btn-danger btn-sm">移除</button></td>
                </tr>
                <tr>
                    <td>总购物价</td>
                    <td ng-bind="totalPrice()"></td>
                    <td>总购买数量</td>
                    <td ng-bind="totalQuantity()"></td>
                    <td colspan="2"><button type="button" ng-click="cart = {}" class="btn btn-danger btn-sm">清空购物车</button></td>
                </tr>
            </tbody>
        </table>
        <p ng-show="!cart.length">
            您的购物车已空
        </p>
    </div>
        <script type="text/javascript" charset="utf-8">
        var cartController = function($scope) {
            $scope.cart = [{
                id: 100,
                name: 'iphone5s',
                quantity: 2,
                price: 4300
       .........完整代码请登录后点击上方下载按钮下载查看