Angularjs demo-2

filter

by wales

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<body ng-app="myModule" class="container">
    <div ng-controller='CartController' class='col-md-6'>
         <h1>Shopping Cart</h1>

        <div class="row">
            <form role="form">
                <table class="table">
                    <thead>
                        <th>品項</th>
                        <th>數量</th>
                        <th>品項</th>
                        <th>單價</th>
                        <th>移除</th>
                    </thead>
                    <tbody>
                        <tr ng-repeat='item in items'>
                            <td><span>{{item.title | uppercase}}</span>

                            </td>
                            <td>
                                <input ng-model='item.quantity' class="form-control" />
                            </td>
                            <td><span>{{item.price | currency}}</span>

                            </td>
                            <td><span>{{item.price * item.quantity | currency}}</span>

                            </td>
                            <td>
                                <button ng-click="remove($index)" class="btn btn-info">Remove</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</body>

JavaScript

angular.module('myModule', ['ui.bootstrap']);

function CartController($scope) {
    $scope.items = [{
        title: 'Apple',
        quantity: 8,
        price: 3.95
    }, {
        title: 'Banana',
        quantity: 17,
        price: 12.95
    }, {
        title: 'Sunflower',
        quantity: 5,
        price: 6.95
    }];
    $scope.remove = function (index) {
        $scope.items.splice(index, 1);
    }
}