allenyang79 · August 29, 2013 05:38
diff --git a/jsbin.aZaHAqa.html b/jsbin.aZaHAqa.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body ng-app>
  <div ng-controller="Ctrl">
    <ul class="" >
      <li ng-repeat="item in items">
        <span>{{item.title}}</span>
        <input ng-model="item.quantity" ng-change="$emit('change');"/>
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
       <button ng-click="remove($index)">Remove</button>
      </li>
    </ul>
    total:{{total}}
  </div>
 </body>
 </html>
diff --git a/jsbin.aZaHAqa.js b/jsbin.aZaHAqa.js
 function Ctrl($scope){
  //$scope.total=100;
  $scope.items=[];
  $scope.items.push({
    title:"A",
    price:10,
    quantity:10
  });
  $scope.items.push({
    title:"B",
    price:120,
    quantity:2
  });
  $scope.items.push({
    title:"C",
    price:50,
    quantity:3
  });

  $scope.$on('change',function(e){
    console.log('change');
    console.dir(arguments);
    e.currentScope.countTotal();
  });

  $scope.countTotal=function(){
    var v=0;
    for(var i=0;i<this.items.length;i++){
      var item=this.items[i];
      v+=item.price*item.quantity;
    }
    $scope.total=v;
  };
  $scope.remove = function(index){
    $scope.items.splice(index, 1);
  };
  $scope.countTotal();
 }
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body ng-app>
	<div ng-controller="Ctrl">
	<ul class="" >
	<li ng-repeat="item in items">
	<span>{{item.title}}</span>
	<input ng-model="item.quantity" ng-change="$emit('change');"/>
	<span>{{item.price \| currency}}</span>
	<span>{{item.price * item.quantity \| currency}}</span>
	<button ng-click="remove($index)">Remove</button>
	</li>
	</ul>
	total:{{total}}
	</div>
	</body>
	</html>