AngularJS實現 購物車

jopen 10年前發布 | 7K 次閱讀 JavaScript angularjs 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <script type="text/javascript" src = "lib/angular.js"></script>
        <style type="text/css">
           .item{
                height: 200px;
                width:100px;
                margin:5px;
                border:1px solid #ccc;
                float:left;
           }
        </style>
    </head>
    <body ng-app = "mapp" ng-controller = "mctrl">
        <div class = "list">
            <div class = "item" ng-repeat = "item in items">
                <p class = "item-name"><span>商品名:</span>{{item.name}}</p>
                <p class = "item-price"><span>價格:</span>{{item.price|currency:"￥"}}</p>
                <input type = "button" ng-click = "buy($index)" value = "購買">
            </div>
        </div>
        <div class = "item-car">
            <p ng-repeat = "item in items">
                <span>{{item.name}}&nbsp&nbsp&nbsp&nbsp<span>
                <span>{{item.price|currency:"單價"}}&nbsp&nbsp&nbsp</span>
                <input type = "button" value = "-" ng-click = "minus($index)"/>
                <input type = "text" ng-model = "varlist.itemNum[$index]">
                <input type = "button" value = "+" ng-click = "add($index)"/>
                <span>單件總價:{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span>
            </p>
            <p>總價：{{varlist.total|number:2}}</p>
        </div>
        <span style="background-color: #339966;"><script type="text/javascript"></span>
            var app = angular.module("mapp", []);
            app.controller("mctrl", function($scope) {
                // 數據源
                $scope.items = [{
                    "name": "王老吉",
                    "price": 4
                }, {
                    "name": "老干媽",
                    "price": 7.5
                }, {
                    "name": "臭豆腐",
                    "price": 7.32
                }, {
                    "name": "餅干",
                    "price": 22
                }, ];
                var len = $scope.items.length;
                var arr = [];
                // 循環為數組賦值
                for (var i = 0; i < len; i++) {
                    arr[i] = 0;
                }
                // 檢測是否變化，為了總價能夠改變
                $scope.$watch("varlist.itemNum", function() {
                    getTotal();
                }, true);
                // 定義變量
                $scope.varlist = {
                    itemNum: arr,
                    total: 0
                }
                // 購物的時候操作
                $scope.buy = function($index) {
                    $scope.varlist.itemNum[$index]++;
                    getTotal();
                }
                // -----
                $scope.minus = function($index) {
                    if ($scope.varlist.itemNum[$index] == 0) {
                        return;
                    } else {
                        $scope.varlist.itemNum[$index]--;
                        getTotal();
                    }
                }
                // ++++
                $scope.add = function($index) {
                    $scope.varlist.itemNum[$index]++;
                    getTotal();
                }
                // 計算總價
                var getTotal = function($index) {
                    $scope.varlist.total = 0;
                    for (var j = 0; j < len; j++) {
                        $scope.varlist.total = $scope.varlist.total + $scope.varlist.itemNum[j] * $scope.items[j].price;
                    }
                    return $scope.varlist.total;
                }
            });
        <span style="background-color: #339966;"></script></span>
    </body>
</html><br><br>2015-01-19   10:54:27  linJS

來自：http://www.cnblogs.com/lin-js/p/4233213.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！