angularjs之双向绑定

今天所学习的东西虽然不是很多 但是对我来说受益匪浅， 就比如说在table中要选中一行的话我们可以这样写：

模板中：

<table ng-controller="tableController" >
        <tr ng-repeat="child in ary" ng-class="{select:$index==selectedRow}" ng-click="clickTheRow($index)">
            <td>{{child.name}}</td>
            <td>{{child.sex}}</td>
        </tr>
    </table>

ng-repeat的意思是，对于ary数组中的每一个元素，都把tr中的dom结构复制一份（包括tr自身）；

ng-class我们可以用对象的形式{select:$index==selectedRow}的意思是当￥index==selectedRow的时候值为true否则为false就没有select的class，ngclick的方法类似于js中的click方法点击执行操作修改￥scope中的属性：

app.controller('tableController', function($scope){
    $scope.ary = [{'name':'小名','sex':'boy'},
                 {'name':'lucy','sex':'girl'},
                 {'name':'tom','sex':'boy'}];
    $scope.clickTheRow = function(row){
        $scope.selectedRow = row;
    }
})

当select:ture时 为tr加上该class 然后添加相应样式，从而实现类似选择一行的效果。

下面我们来做个购物车的例子：

<div ng-controller="shoppingController">
        <div ng-repeat="item in items">
            <span>{{item.title}}</span>
            <input type="text" 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>Total:{{bill.totalCart | currency}}</div>
        <div>Discount:{{bill.discount | currency}}</div>
        <div>Subtotal:{{bill.subtotal | currency}}</div> -->

        <input type="text" ng-model="msg">{{msg | titleCase:msg}}
    </div>

app.controller('shoppingController',function($scope){
	$scope.bill = {};
	$scope.msg = "hah jia you ni shi";
	$scope.items = [
		{'title':'Paint pots','quantity':8,'price':3.95},
		{'title':'Polka dots','quantity':17,'price':12.95},
		{'title':'Pabbles ','quantity':5,'price':6.95},
	];
	//第一种
	$scope.totalCart = function(){
		var total = 0;
		for (var i = 0; i < $scope.items.length; i++) {
			total+=$scope.items[i].quantity*$scope.items[i].price;
		}
		return total;
	}
	$scope.subtotal = function(){
		return $scope.totalCart() - $scope.bill.discount;
	}
	function calculateDiscount(newValue,oldValue,scope){
		$scope.bill.discount = newValue > 100 ? 10 : 0;
	}
	$scope.$watch($scope.totalCart,calculateDiscount);

这个其实很简单就是为totalCart添加了监听事件，从而实现相应的变化，写法二：

$scope.$watch(function(){
        var total = 0;
        for (var i = 0; i < $scope.items.length; i++) {
            total+=$scope.items[i].quantity*$scope.items[i].price;
        }
        $scope.bill.totalCart = total;
        $scope.bill.discount = total>100?10:0;
        $scope.bill.subtotal = total - $scope.bill.discount;
    })

这是一种相对简单的写法，这个是检测￥scope数据模型的变化，如果有变化立刻执行相应函数。

下面补充下￥watch的解释：

￥watch（watchFn,watchAction,deepWatch）

watchFn该参数是一个带有angular的表达式或者函数的字符串，他会返回被监控的数据模型的当前值，这个表达式将会被执行很多次，所以你要保证他不会保证其他副作用，也就是说要保证他可以被调用很多次也不会改变状态，给予同样的原因，监控表达式应该很容易被计算出来。如果你使用字符串传递了一个angular表达式，那么他将会针对调用它的那个作用域中的对象而执行。

watchAction这是一个函数或者表达式，当watchFn发生变化时会被调用，如果是函数的形式他将会接收到watchFn新旧两个值，以及作用域对象的引用其函数签名为function（newValue,oldValue,scope）。

deepWatch如果设置为ture，这个可选的bool型参数将会命令angular去检查被监控对象的每个属性是否发生了变化，如果你想要监控数组中的元素，或者对象上的所有属性，而不只是监控一个简单的值你就可以使用这个参数，由于angular需要便利数组或者对象，如果集合比较大那么运算负担就会比较重。

￥watch函数会返回一个函数，当你不在需要接收变更通知时，可以用这个返回的函数注销监控器。具体写法如下：

var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());

dereg();