<html ng-app>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript">
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}
];
var 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;
}
$scope.bill.totalcart = total;
$scope.bill.discount = total > 100 ? 10 :0;
$scope.bill.subtotal = total - $scope.bill.discount;
}
$scope.$watch('items',totalCart,true);//只用watch着items的变化
}
</script>
</head>
<body>
<div ng-controller="CartController">
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{bill.totalcart| currency }}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>SubTotal: {{bill.subtotal | currency}}</div>
</div>
<script type="text/javascript" src="https://www.jb51.net/angular.min.js"></script>
</body>
</html>
AngularJS语法详解（续）(2)
内容版权声明：除非注明，否则皆为本站原创文章。