4、$watch的用法

淡淡的烟草味﹌ 2022-08-23 08:23 124阅读 0赞

1、$watch的用法

1.1 利用$watch来观察对象属性数值的变化

1.用$watch来观察,iphone.money的改变  
            2.用iphone.money表示,而不是$scope.iphone.money

3.要加单引号'iphone.money'

4.代码

<!DOCTYPE html>
    <html ng-app>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>购物金额的计算</title>
    		<script type="text/javascript" src="../js/angular.min.js"></script>
    		<script type="text/javascript">
    			function Aaa($scope) {
    				$scope.iphone = {
    					money: 5,
    					num: 1,
    					fre: 10
    				}
    				$scope.sum = function() {
    						return $scope.iphone.money * $scope.iphone.num;
    					}
    					/*用$watch来观察,iphone.money的改变*/
    					/*1、用iphone.money表示,而不是$scope.iphone.money
    					  2、要加单引号'iphone.money'
    					 * */
    				$scope.$watch('iphone.money', function(newVal, oldVal) {
    					console.log(newVal);
    					console.log(oldVal);
    				});
    			}
    		</script>
    	</head>
    
    	<body>
    		<div ng-controller="Aaa">
    			<p>价格:<input type="text" ng-model="iphone.money" /></p>
    			<p>个数:<input type="text" ng-model="iphone.num" /></p>
    			<p>费用:<span>{
       {sum() | currency:"￥"}}</span></p>
    
    		</div>
    	</body>
    
    </html>

1.2 利用 $watch来观察对象的变化

1.用$watch来观察,iphone的改变

2.用iphone表示,而不是$scope.iphone

3.要加单引号'iphone'

4.第三个参数要为true

5.代码

<!DOCTYPE html>
    <html ng-app>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>购物金额的计算</title>
    		<script type="text/javascript" src="../js/angular.min.js"></script>
    		<script type="text/javascript">
    			function Aaa($scope) {
    				$scope.iphone = {
    					money: 5,
    					num: 1,
    					fre: 10
    				}
    				$scope.sum = function() {
    						return $scope.iphone.money * $scope.iphone.num;
    					}
    					/*用$watch来观察,iphone的改变*/
    					/*1、用iphone表示,而不是$scope.iphone
    					  2、要加单引号'iphone'
    					  3、第三个参数要为true
    					 * */
    				$scope.$watch('iphone', function(newVal, oldVal) {
    					console.log(newVal);
    					console.log(oldVal);
    				}, true);
    			}
    		</script>
    	</head>
    
    	<body>
    		<div ng-controller="Aaa">
    			<p>价格:<input type="text" ng-model="iphone.money" /></p>
    			<p>个数:<input type="text" ng-model="iphone.num" /></p>
    			<p>费用:<span>{
       {sum() | currency:"￥"}}</span></p>
    
    		</div>
    	</body>
    
    </html>

1.3 利用 $watch来观察函数返回数值的变化

1.用$watch来观察,$scope.sum函数返回数值的改变  
            2.用$scope.sum表示  
            3.不要加单引号,$scope.sum

4.代码

<!DOCTYPE html>
    <html ng-app>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>购物金额的计算</title>
    		<script type="text/javascript" src="../js/angular.min.js"></script>
    		<script type="text/javascript">
    			function Aaa($scope) {
    				$scope.iphone = {
    					money: 5,
    					num: 1,
    					fre: 10
    				}
    				$scope.sum = function() {
    						return $scope.iphone.money * $scope.iphone.num;
    					}
    					/*用$watch来观察,$scope.sum函数返回数值的改变*/
    					/*1、用$scope.sum表示
    					  2、不要加单引号,$scope.sum
    					 * */
    				$scope.$watch($scope.sum, function(newVal, oldVal) {
    					console.log(newVal);
    					console.log(oldVal);
    				});
    			}
    		</script>
    	</head>
    
    	<body>
    		<div ng-controller="Aaa">
    			<p>价格:<input type="text" ng-model="iphone.money" /></p>
    			<p>个数:<input type="text" ng-model="iphone.num" /></p>
    			<p>费用:<span>{
       {sum() | currency:"￥"}}</span></p>
    
    		</div>
    	</body>
    
    </html><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">     </span>