To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

angularjs $watch demo 

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>
<body>
    <div ng-controller="CartController">
        <div ng-repeat="item in items">
            <span>{{item.title}}</span>
            <input type="text" ng-model="item.quantity">
            <span>{{item.price | currency}}</span>
            <span>{{item.price*item.quantity | currency}}</span>
        </div>
        <div>Total: {{totalCart() | currency}}</div>
        <div>Discount: {{bill.discount | currency}}</div>
        <div>Subtotal {{bill.subtotal | currency}}</div>
    </div>
    <script>
        function CartController($scope) {
            $scope.bill = {};
            $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; i< $scope.items.length; i++) {
                    total += $scope.items[i].price*$scope.items[i].quantity;
                }
                return total;
            }

            var calculateTotals = function () {
                var total = 0;
                for (var i = 0; i < $scope.items.length; i++) {
                    total += $scope.items[i].price*$scope.items[i].quantity;
                }
                $scope.bill.totalCart = total;
                $scope.bill.discount = total > 100 ? 10 : 0;
                $scope.bill.subtotal = total - $scope.bill.discount;
            }
            
            $scope.$watch('items', calculateTotals, true);
        }

 

posted on 2014-04-02 14:53  Ijavascript  阅读(363)  评论(0)  编辑  收藏  举报