Angular学习（十二）——在watch()中的性能注意事项

最新推荐文章于 2024-06-12 11:24:43 发布

SnowUnicorn

最新推荐文章于 2024-06-12 11:24:43 发布

阅读量986

点赞数

分类专栏： AngulaJS 文章标签： angularjs 性能 watch 改进

本文链接：https://blog.csdn.net/shixihaoma/article/details/38448025

版权

购物卡案例源代码：

<html ng-app>
<head>
	<title>Your shopping Cart</title>
</head>
<body >
<script src="angular.min.js"></script>
<div ng-controller="CartController">
	<h1>Your Order</h1>
	<div ng-repeat="item in items">
		<span>{
  {$index+1}}</span>
		<span>{
  {item.title}}</span>
		<input 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:{
  {subtotal() |currency}}</div>
</div>
	<script>
	function CartController($scope){
	        $scope.bill = {};
			$scope.items = [
				{title:"Paint pots",quantity:8,price:3.95},
				{title:"Polka dots",quantity:5,price:12.95},
				{title:"Pebbles",quantity:5,price:6.95},
			];
			$scope.totalCart =function(){
				var total = 0;
				var len = $scope.items.length
				for(var i = 0;i < len;i++){
					total = total + $scope.items[i].price * $scope.items[i].quantity;
				}
				return total;
			}
			$scope.subtotal = function(){
				return $scope.totalCart() - $scope.bill.discount;
			};
			function calculateDiscount(newValue,oldValue,scope){
				$scope.bill.discount = newValue