angular中scope的用法

AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时，页面也能自动随之更新，反之亦然。当某个域的内容发生变化时，与之关联的模型也能更新。正因为Angular处理了所有的中间代码，所以你不用像jQuery那样，手动更新HTML或者事件监听。

AngularJS主要是对数据进行操作。

首先应当先引入Angular.js的文件

<script type="text/javascript" src="angular.min.js"></script>

下载地址

AngularJS通过大量的指令让你能够在模型和HTML元素间做关联。
以ng-开头的属性，并且能添加到任何元素上。
ng-app 指令：用来初始化一个 AngularJS 应用程序，也就是说，你想绑定哪一块的程序，就应该把这个指令绑定到哪里，并为其取个名字。
在此例中，取名为“test”。

<div ng-app="test" ng-controller="contr">//需要声明一个控制器
		商品名称：{{goods.data.title}},//AngularJS 表达式写在双大括号内，可以把数据绑定到 HTML


		<br>
		价格：{{goods.data.price}},
		<br>
		数量：{{goods.data.num}},
		<input type="button" value="增加" ng-click="goods.add()">
		
		<input type="button" value="减少" ng-click="goods.reduce()">
		<br>
		总和:{{goods.data.price*goods.data.num}}
		
	</div>

<script type="text/javascript">
		var m=angular.module("test",[]);
		//双向数据绑定
		m.controller("contr",["$scope",function($scope){
		//viewModel
	    $scope.goods={

               //数据
	    	data:{"title":"mac","price":8000,"num":0},

                //方法
	    	add:function(){
	    		$scope.goods.data.num=Math.min(++$scope.goods.data.num,6);
	    	},
	    	reduce:function(){
	    		$scope.goods.data.num=Math.max(--$scope.goods.data.num,0);
	    	}

	    }
		}]);
	    </script>

最后实现的结果