yo-angular-hello/angularjs_shoppingcart.html at master · demox2026/yo-angular-hello · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!--结合angularJS和bootstrap展现购物车-->
<!DOCTYPE html>
<html>
<head>
    <base />
    <title>购物车实例</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
    <h1>购物车实例</h1>
    <div class="container" ng-app="ShoppingCartModule">
        <div class="panel panel-default" ng-controller='CartController'>
            <!-- Default panel contents -->
            <div class="panel-heading">购物车</div>

            <!-- Table -->
            <table class="table table-hover">
                <thead>
                    <tr>
                        <td>名称</td>
                        <td>数量</td>
                        <td>单价</td>
                        <td>总计</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody >
                    <tr ng-repeat='item in items' ng-click='selectOneRow($index)' ng-class='{info: $index==selectedRow}'>
                        <td ng-bind="item.title"></td>
                        <td>
                            <input class="form-control" style="width: 6em;" ng-model='item.quantity' /></td>
                        <td ng-bind="item.price | currency"></td>
                        <td ng-bind="item.price * item.quantity | currency"></td>
                        <td>
                            <button class="btn btn-default" ng-click="remove($index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            <div>总计: {{totalCart() | yuan}}</div>
            <a href="#" class="btn btn-primary" role="button" ng-click="insertOne()">添加到购物车</a>
        </div>
    </div>
    <script src="js/angular-1.2.2/angular.min.js"></script>
    <script>
        //处理购物车的模块
        var shoppingCartModule = angular.module('ShoppingCartModule', []);

        shoppingCartModule.controller("CartController", function ($scope) {
            $scope.items = [{ title: 'Paint pots', quantity: 8, price: 3.95 },
                { title: 'Polka dots', quantity: 17, price: 12.95 },
                { title: 'Pebbles', quantity: 5, price: 6.95 }];

            $scope.totalCart = function () {
                var total = 0;
                for (var i = 0, len = $scope.items.length; i < len; i++) {
                    total = total + $scope.items[i].price * $scope.items[i].quantity;
                }
                return total;
            }

            $scope.remove = function (index) { $scope.items.splice(index, 1); };
            $scope.insertOne = function () { $scope.items.splice(0, 0, { title: 'liupras', quantity: 10, price: 8.95 }); };
            $scope.selectOneRow = function (row) {
                $scope.selectedRow = row;
            };
        });

        //自定义过滤器
        shoppingCartModule.filter("yuan", function () {
            var yuanFilter = function (input) {
                var f = parseFloat(input);
                if (isNaN(f)) {
                    return;
                }
                f = Math.round(input * 100) / 100;
                var s = f.toString();
                var rs = s.indexOf('.');
                if (rs < 0) {
                    rs = s.length;
                    s += '.';
                }
                while (s.length <= rs + 2) {
                    s += '0';
                }
                return "￥" + s;
            }
            return yuanFilter;
        });

    </script>
</body>
</html>