An_form購物車（angular js）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js"></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.Product = [{
                    id: 1000,
                    name: "iphone8",
                    quantity: 1,
                    price: 8888
                }, {
                    id: 1001,
                    name: "iPhone9",
                    quantity: 1,
                    price: 9888
                }, {
                    id: 1002,
                    name: "iPhone 2s",
                    quantity: 1,
                    price: 3888
                }, {
                    id: 1003,
                    name: "iPhone 7P+",
                    quantity: 1,
                    price: 10088
                }]
                //減少數量
                $scope.reduce = function(index) {
                    if($scope.Product[index].quantity > 1) {
                        $scope.Product[index].quantity--;
                    } else {
                        $scope.remove(index);
                    }
                }
                //添加數量函數
                $scope.add = function(index) {
                    $scope.Product[index].quantity++;
                }
                //所有商品總價函數
                $scope.totalQuantity = function() {
                    var allprice = 0
                    for(var i = 0; i < $scope.Product.length; i++) {
                        allprice += $scope.Product[i].quantity * $scope.Product[i].price;
                    }
                    return allprice;
                }
                //購買總數量函數
                $scope.numAll = function() {
                    var numAlls = 0
                    for(var i = 0; i < $scope.Product.length; i++) {
                        numAlls += $scope.Product[i].quantity;
                    }
                    return numAlls;
                }
                //刪除當前商品
                $scope.remove = function(index) {
                    if(confirm("確定要清空數據嗎")) {
                        $scope.Product.splice(index, 1)
                    }
                }
                //清空購物車
                $scope.removeAll = function() {
                    if(confirm("你確定套清空購物車所有商品嗎?")) {
                        $scope.Product = [];
                    }
                }
                //解決輸入框輸入負數時變為1
                $scope.change = function(index) {
                    if($scope.Product[index].quantity >= 1) {} else {
                        $scope.Product[index].quantity = 1;
                    }
                }
                $scope.$watch('Product', function(oldvalue, newvalue) {
                    console.log(oldvalue);
                    console.log(newvalue);
                })
            })
        </script>
    </head>

    <body ng-app="myApp">
        <div ng-controller="myCtrl">
            <table border="" cellspacing="" cellpadding="">
                <tr>
                    <th>產品編號</th>
                    <th>產品名稱</th>
                    <th>購買數量</th>
                    <th>產品單價</th>
                    <th>產品總價</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="x in Product">
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>
                        <button ng-click="reduce($index)">清除</button>
                        <input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
                        <button ng-click="add($index)">添加</button>
                    </td>
                </tr>
            </table>
            <div id="foot"><span>總價:</span><span ng-bind="totalQuantity()"></span><span>購買數量</span>
                <span>{{numAll()}}</span> <button ng-click="removeAll()">清空購物車</button>
            </div>
        </div>
    </body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容