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();