【AngularJS入門】用ng-repeat指令實現循環輸出

時間 2019-11-19

標籤 AngularJS入門 repeat 指令實現循環輸出欄目 AngularJS 简体版

原文原文鏈接

循環輸出列表不少項目在web服務端作，前端作好模版後後端寫jsp代碼，雙方須要緊密合做，分清責任。有些項目由後端提供restful方法，前端用ajax調用本身循環，這種通常是大把的jquery拼字符串，太不直觀，有人搞出了js模板，也沒好到哪裏去。css

用AngularJS就爽多了，語法和JSP相似：html

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-repeat directive</title>

    @*https://code.angularjs.org/*@

    <script src="https://code.angularjs.org/1.2.26/angular.min.js"></script>

    <style type="text/css">
        table.dataintable {
            margin-top: 10px;
            border-collapse: collapse;
            border: 1px solid #aaa;
            width: 100%;
        }

            table.dataintable th {
                vertical-align: baseline;
                padding: 5px 15px 5px 6px;
                background-color: #d5d5d5;
                border: 1px solid #aaa;
                text-align: left;
            }

            table.dataintable td {
                vertical-align: text-top;
                padding: 6px 15px 6px 6px;
                background-color: #efefef;
                border: 1px solid #aaa;
            }

            table.dataintable pre {
                width: auto;
                margin: 0;
                padding: 0;
                border: 0;
                background-color: transparent;
            }

            table.dataintable p {
                margin: 0 0 2px 0;
            }
    </style>
</head>
<body>
    <table class="dataintable" ng-controller="CartController" style="">
        <caption>個人購物車</caption>
        <tr>
            <th>序號</th>
            <th>商品</th>
            <th>單價</th>
            <th>數量</th>
            <th>金額</th>
            <th>操做</th>
        </tr>
        <tr ng-repeat="item in items">
            <td>{{$index + 1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price | currency}}</td>
            <td><input ng-model="item.quantity"></td>
            <td>{{item.quantity * item.price | currency}}</td>
            <td>
                <button ng-click="remove($index)">Remove</button>
            </td>
        </tr>
    </table>

    <script>
        function CartController($scope) {
            $scope.items = [
                { name: "雷柏（Rapoo） V500 機械遊戲鍵盤 機械黃軸", quantity: 1, price: 199.00 },
                { name: "雷柏（Rapoo） V20 光學遊戲鼠標 黑色烈焰版", quantity: 1, price: 139.00 },
                { name: "AngularJS權威教程", quantity: 2, price: 84.20 },

                { name: "雷柏（Rapoo） V500 機械遊戲鍵盤 機械黃軸", quantity: 1, price: 199.00 },
                { name: "雷柏（Rapoo） V20 光學遊戲鼠標 黑色烈焰版", quantity: 1, price: 139.00 },
                { name: "AngularJS權威教程", quantity: 2, price: 84.20 },

                { name: "雷柏（Rapoo） V500 機械遊戲鍵盤 機械黃軸", quantity: 1, price: 199.00 },
                { name: "雷柏（Rapoo） V20 光學遊戲鼠標 黑色烈焰版", quantity: 1, price: 139.00 },
                { name: "AngularJS權威教程", quantity: 2, price: 84.20 },

                { name: "雷柏（Rapoo） V500 機械遊戲鍵盤 機械黃軸", quantity: 1, price: 199.00 },
                { name: "雷柏（Rapoo） V20 光學遊戲鼠標 黑色烈焰版", quantity: 1, price: 139.00 },
                { name: "AngularJS權威教程", quantity: 2, price: 84.20 }
            ];

            $scope.remove = function (index) {
                $scope.items.splice(index, 1);
            }
        }
    </script>
</body>
</html>